sa-tasche
12/27/2012 - 4:20 PM

"3 small example solutions for the problem that anchor links scroll under a fixed navigation bar with known height on top."

"3 small example solutions for the problem that anchor links scroll under a fixed navigation bar with known height on top."

README.txt
content_copyfile_download
Source
https://plus.google.com/115298126318884152372/posts/B2rVttMAdXA
http://hobbestherat.ch/2012/12/23/anchor/
example.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <title>Codecs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
  </head>
<body>
<nav>
  <div class="menu">
    Stuff here with <a href="#anchor">anchor</a>
  </div>
</nav>
<div class="content">
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
<div class="anchor" id="anchor"> </div>
<h1>Here some stuff</h1>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>lots and lots and <br/>
</div>
</body>
hiddenanchor.css
content_copyfile_download
body {
  margin: 0px 0px;
  font-family: arial;
  font-size: 14px;
}

div.anchor {
  position: relative;
	margin-top:-30px;
	padding-top:30px;
    display: hidden;
}

div.menu {
	width: 100%;
	top: 0px;
 	height: 30px;
 	position:fixed;
	font-family:arial;
	background:#ffcccc;
	margin:0px;
}

div.content {
	padding-top:35px;
	padding-left:15px;
}
marginpadding.css
content_copyfile_download
body {
  margin: 0px 0px;
  font-family: arial;
  font-size: 14px;
}

h1 {
  margin-top:-30px;
  padding-top:30px;
}

div.menu {
	width: 100%;
	top: 0px;
 	height: 30px;
 	position:fixed;
	font-family:arial;
	background:#ffcccc;
	margin:0px;
}

div.content {
	padding-top:35px;
	padding-left:15px;
}
scrollablediv.css
content_copyfile_download
body {
  margin: 0px 0px;
  font-family: arial;
  font-size: 14px;
}

div.scroll {
  overflow: scroll;
  position: absolute;
  top: 30px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

div.menu {
  width: 100%;
	top: 0px;
 	height: 30px;
	font-family:arial;
	background:#ffcccc;
	margin:0px;
}