Related
Once I scroll down the nav becomes fixed which is great but then the content jumps behind it. The height of the nav will be changing as the browser window gets smaller on the actual site I'm building, so I can't really use a fixed height margin on the content to push it down. As the margin it will needed will vary depending on the browser window size. Is there any way to solve this using jQuery?
heres a live demo http://codepen.io/Reece_Dev/pen/VpXVMq Thanks
html:
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
<header>Logo</header>
<nav>
<div class="burger-button">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<ul>
<li>Welcome</li>
<li>Menu</li>
<li>Opening Times</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
CSS:
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
margin: 0 auto;
background-color: #0000aa;
font-size: 5em;
text-align: center;
}
nav{
width: 1200px;
margin: 0 auto;
background-color: #0000ff;
}
nav ul{
overflow: hidden;
color: #fff;
text-align: center;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 1em 2em;
}
nav ul li a{
color: inherit;
text-decoration: none;
font-size: 1.5em;
}
section{
width: 1200px;
margin: 0 auto;
line-height: 1.5em;
font-size: 1em;
text-align: center;
padding-top: 2em;
background-color: #4488ff;
}
.burger-button{
width: 100%;
background-color: white;
text-align: right;
box-sizing: border-box;
padding: 1em;
cursor: pointer;
display: none;
}
.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
}
#media screen and (max-width:1200px){
header{
width: 100%;
}
nav{
width: 100%;
}
section{
width: 100%;
}
}
#media screen and (max-width: 480px){
nav ul{
max-height: 0;
}
.showing{
max-height: 13em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
}
.burger-button{
display: inline-block;
}
}
jQuery:
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
} else{
jQuery("nav").removeClass("fixed");
}
});
});
You need to account for the height of the nav because it's being taken out the flow of content when position: fixed; is set.
jQuery
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("nav").removeClass("fixed");
jQuery("section").css("margin-top", "0");
}
});
jQuery(window).resize(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("section").css("margin-top", "0");
}
});
});
What this does is adds a margin to offset the height of the nav that is pushing the content down when it's not fixed. That should do it for you.
Edit
I've updated the code so it now just uses jQuery instead which on resize will recalculate the height of the nav and adjust the margin on the section element.
If you mean the scrollbar could cover the fixed element, then you'd better choose to layout with flexbox.
Fixed element must be covered by scrollbar
I tested the below code on your codepen demo:
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
var navHeight = jQuery("nav").height();
jQuery("section").css({"margin-top" : navHeight});
} else{
jQuery("nav").removeClass("fixed");
jQuery("section").css({"margin-top" : 0});
}
});
});
It works on your demo. I hope it solves the issue.
I was checking this website: http://www.flagofplanetearth.com/
You can see, the images reveal more as you scroll down.
I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.
Thanks.
It's called a parralax effect.
Here's a great documentation on how it works
Cheers!
That's a parallax effect.
Simple method: (fixed image)
.parallax {
background-attachment: fixed;
}
Advanced method: (what you saw)
1) Use same CSS
2) Use the following JS:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
Check out this:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
#parallax {
background-image: url('http://lorempixel.com/400/400/abstract/');
background-attachment: fixed;
min-height: 400px;
}
<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>
Imagine a div that has a height of 300 px, and at its bottom there is another div nested with a height of 100 px. I'd like to freeze (stick to top) this 100 px div, but the background properties (eg. background color) are set in its container div.
jsfiddle
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis. Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices. Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
Thank you all in advance!
A possible solution, using jQuery:
$first = $('#first');
$sticky = $('#sticky');
$(window).scroll(function() {
$first.toggleClass('fixed', $(window).scrollTop() > $first.height() - $sticky.height())
.css('top', $(window).scrollTop() - $first.height() + $sticky.height());
});
The CSS:
.fixed{
position: relative;
top: 0;
left: 0;
width: 100%;
}
JS Fiddle Demo
if I understand your question the "sticky" part has a rgba background so I guess the first container has background image or simillar.
I your case I would stick the full container with negative top value to make the effect is the sticky part the one fixed positioned.
basically you use this simple jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#first").addClass("fixed");
} else {
$("#first").removeClass("fixed");
}
});
and you add this class:
.fixed {position:fixed;top:-200px}
Here's your FIDDLE
Something like this?
Updated 2
JSFiddle
Bassically you need to add the following class style to your CSS:
#sticky.top {
position: fixed;
top: 0;
}
And the following jQuery.
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 200) {
$("#sticky").addClass("top");
} else {
$("#sticky").removeClass("top");
}
});
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#sticky.top {
background:#585858;
position: fixed;
top: 0;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis.
Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo
commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer
lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt
neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan
sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum
vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu
elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices.
Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie
justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor
sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar
sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
I have a problem with max-height in Firefox.
I build a short Code Example to show the problem. Please open this example in Chrome and in Firefox. The behaviour in Firefox isn't the same as in chrome.
$(function() {
setTimeout(function() {
$('body').css("max-height", $('body').height() - 100);
}, 250);
});
body{
margin: 0;
padding: 0;
background-color: red;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>
What I want to do is: remove the 100px gap on the end of the page. (which is only visible in Firefox).
Off course, I know that I can place the div #background-gradient absolute - which would remove this problem. But this is just an example. When using position: absolute, I will get an background flickering in IE, so I have to do it this way. More Details on this Bug: background-flickering with position absolute/fixed in IE
Use margin-top:-100px instead of top:-100px
If you read the documentation about position:relative it states:
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
body{
margin: 0;
padding: 0;
background-color: red;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
margin-top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>
The height is set on the body, the problem is you need to set overflow:hidden; to prevent the full child element from showing despite being larger than the parent body
$(function() {
setTimeout(function() {
$('body').css("max-height", $('body').height() - 100);
}, 250);
});
body{
margin: 0;
padding: 0;
background-color: red;
overflow:hidden;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>
I have the following code that is suppose to illustrate navigation menu bar that can float.
Unfortunately, it cannot work in Microsoft IE (IE 8, 9) but it
<html lang="en">
<head>
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style type="text/css">
body {
background-color: #333;
color: #999;
font: 12px/1.4em Arial,sans-serif;
}
#wrap {
margin: 10px auto;
background: #666;
padding: 10px;
width: 700px;
}
#header {
background-color: #666;
color: #FFF;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 5px;
}
#navWrap {
height: 30px;
}
#nav {
padding: 5px;
//background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: right;
padding: 3px 8px;
background-color: #FFF;
margin: 0 10px 0 0;
color: #F00;
list-style-type: none;
}
#nav li a {
color: #F00;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
.bigNum {
font-size: 20px;
color: #000;
background: #FFF;
padding: 2px;
}
#eduHomeBackLink {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #333;
background-color: rgba(0,0,0,0.85);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
font-family: Lato,'Lucida Grande',sans-serif;
}
#eduHomeBackLink a {
padding: 10px;
border: none;
}
#eduHomeBackLink a:hover {
color: #FFF;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
<div id="navWrap">
</div>
</div>
<p><a name="1"></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta justo in tellus porttitor non placerat dui pulvinar. Aliquam erat volutpat. Morbi ullamcorper libero sit amet tortor porta iaculis. Duis sit amet diam dolor. Mauris bibendum pharetra justo, sed ornare arcu scelerisque vitae. Integer molestie dignissim lacinia. Etiam sagittis consectetur iaculis. Pellentesque fringilla nulla at tortor dictum lobortis.
</p>
<div id="eduHomeBackLink">« Back to Education Center Home</div>
<p>
<span class="bigNum">1.</span> Aliquam erat volutpat. Integer pulvinar dignissim lacus eu lacinia. Sed vitae orci eget nisl ultricies feugiat quis ut velit. Sed urna mauris, viverra volutpat pulvinar et, tempus vel odio. Aenean at posuere massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis augue nisi, quis ornare nisl. Nulla sagittis neque at massa venenatis tincidunt. Morbi sed nibh magna, vel consectetur nisi. Nullam tortor augue, scelerisque et consequat eu, fermentum at eros. Donec scelerisque ullamcorper tincidunt.
</p>
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<br class="clearLeft" />
</div>
<p>
Pellentesque ut nulla dolor. Sed non diam odio, ac luctus mauris. Nunc erat turpis, imperdiet vel laoreet laoreet, scelerisque vel dui. Sed nec nisl nulla, ut gravida neque. Mauris augue nibh, accumsan id viverra et, pellentesque a orci. Integer venenatis congue urna a ornare. Fusce in facilisis tortor. In lobortis est non lacus cursus venenatis. Donec a metus erat, id rhoncus turpis. Quisque vitae venenatis tellus. Donec quis risus erat, in luctus justo. Nulla ultrices, urna quis faucibus vehicula, lorem nibh tristique magna, nec tristique augue massa sit amet arcu. Donec malesuada, erat iaculis pretium ultricies, lorem nisl lacinia tellus, vel luctus augue nunc eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dignissim, orci ut ultrices aliquet, enim nisl auctor magna, nec feugiat eros lorem vehicula ipsum.
</p>
<p>
Maecenas vitae mauris enim, vel pretium turpis. Sed pharetra accumsan tellus. Maecenas pulvinar ipsum viverra sapien volutpat blandit. Vivamus vel massa velit. Pellentesque condimentum tincidunt aliquam. Vivamus mattis auctor diam, eu commodo massa laoreet ut. Sed congue faucibus arcu, quis hendrerit nisl pellentesque non. Nunc sagittis condimentum lacus. Cras tincidunt sem quis lorem tempor eget porta magna pulvinar. Donec molestie diam sagittis sem tristique in iaculis ligula aliquet. Aenean rutrum eleifend metus nec tempus. Integer nisi ligula, pretium in porta vel, euismod non lectus. Aliquam erat volutpat. Praesent sit amet massa purus.
</p>
<p><a name="2"></a>
Ut pellentesque, lectus ut porttitor ullamcorper, velit nulla dignissim tellus, eu luctus nibh mauris non arcu. Mauris viverra purus et leo condimentum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum facilisis lacus, quis rutrum purus tristique non. Nam vestibulum mauris eu sem porttitor accumsan. Phasellus at eleifend neque. Nam interdum ultrices commodo. Nunc dignissim aliquet dui. Nunc id nisl congue dolor pharetra pulvinar vel ac lectus. Nunc mi justo, semper id sollicitudin et, luctus eget quam. Ut condimentum porta consectetur. Donec nunc turpis, molestie ac semper ut, aliquet id nulla. Vestibulum id ipsum purus, sed tempor lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
<span class="bigNum">2.</span> Aliquam erat volutpat. Duis euismod porta eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porta tincidunt gravida. Praesent sed mi nisl, non pretium mi. Suspendisse nibh orci, mollis eget adipiscing id, malesuada quis enim. Nullam facilisis elit ut magna facilisis ac eleifend diam tempor. Curabitur et justo est, a sagittis velit. Proin mollis, libero ac luctus faucibus, ipsum risus consequat dolor, viverra sagittis felis lorem non quam. Nam risus nisl, congue a semper eu, dapibus ac nunc. Maecenas tortor nisl, pellentesque eu luctus at, viverra ut libero. Nullam quis egestas massa. Donec dapibus rhoncus risus nec tincidunt. Suspendisse condimentum ante sit amet odio consequat id suscipit ante tempus. Aenean purus leo, blandit a iaculis non, tristique ullamcorper ante.
</p>
<p>
Phasellus consectetur, ante nec pretium hendrerit, arcu nunc ullamcorper lectus, non pulvinar sapien nibh ac sem. Nullam dignissim erat sit amet sapien convallis ornare. In hac habitasse platea dictumst. Fusce et ante ut turpis condimentum dictum. Mauris elit justo, laoreet eget consectetur sed, suscipit ut augue. Phasellus id sollicitudin enim. Aenean et justo magna, in ultricies lectus. Nunc blandit quam rhoncus quam pretium tempor. Aenean nec fermentum nibh. Donec ornare magna nec leo tempus ac varius tortor hendrerit. Ut vel erat purus. Maecenas volutpat convallis est a sagittis.
</p>
<p>
Duis mattis orci at justo molestie blandit. Nunc blandit tortor vitae ipsum congue ut pharetra nibh accumsan. Phasellus dapibus risus sed purus laoreet mattis. Ut placerat imperdiet diam, ut blandit dolor auctor vel. Nunc in odio quis eros fringilla consectetur. Ut porttitor imperdiet arcu nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis hendrerit felis id mauris pulvinar faucibus sodales magna dictum.
</p>
<p>
Mauris in tincidunt ante. Donec fermentum varius interdum. Nulla consectetur faucibus purus, eu interdum nulla aliquet eu. Cras id lectus lacus, eleifend rhoncus lorem. Integer malesuada tristique lobortis. Phasellus a dolor non turpis euismod euismod vel a enim. Duis eu augue a elit commodo pellentesque. Ut dolor odio, ornare ac faucibus sed, tincidunt vel ipsum. Nunc et nibh eros, ut vehicula massa. Donec tempus, augue vel consequat adipiscing, nibh lacus mollis nunc, egestas commodo nisi quam sed orci.
</p>
<p>
Maecenas sit amet tortor nunc. Donec nec tempor augue. Mauris mi dolor, dictum et dictum a, tincidunt sit amet sapien. Nunc dapibus nunc nec arcu tristique sit amet consectetur libero eleifend. Suspendisse dignissim massa eu neque lacinia tincidunt. Vivamus vel nisl eu nulla convallis pretium. Nunc ante justo, hendrerit a malesuada vitae, semper a risus. Nunc viverra purus quis lorem cursus quis ultrices mauris ullamcorper. Pellentesque luctus, nibh vel elementum facilisis, nisi turpis aliquet augue, et feugiat nisi massa sed risus. Aenean dui velit, molestie placerat euismod vel, sodales at mauris. Donec leo felis, eleifend nec placerat sed, placerat vulputate libero.
</p>
<p>
Nullam in mauris eleifend lorem mollis facilisis dapibus vel felis. Morbi pharetra euismod semper. Vivamus mollis gravida imperdiet. Proin mattis, nulla sed lobortis tincidunt, mauris dui suscipit dolor, sed fermentum nisi orci eget neque. Ut mattis leo eu dolor fringilla eu auctor tortor blandit. Mauris eleifend risus nec felis elementum mattis. Nulla rhoncus ante quam, eu eleifend leo. Aliquam euismod felis in nunc suscipit congue. Sed facilisis sapien a erat posuere ac facilisis lectus cursus. Praesent nulla felis, placerat nec lacinia sit amet, laoreet eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non urna mattis dui porttitor egestas at sed tellus. Integer id commodo quam. Nullam fermentum, velit nec sagittis placerat, magna nibh posuere dolor, vel dictum mi tortor et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean iaculis, orci eu pulvinar pulvinar, tellus nisl luctus lectus, ac scelerisque leo purus non eros.
</p>
<p>
Cras est sem, rutrum non malesuada ac, fringilla et risus. Mauris sit amet quam eget orci varius mattis quis eu augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at ipsum eros. Pellentesque porta vestibulum mi, a pulvinar est condimentum scelerisque. Duis vitae metus a metus euismod tempor. Nunc augue mi, aliquam at commodo sed, condimentum a lorem. Proin rhoncus faucibus congue. Quisque diam ante, lacinia non fermentum at, dapibus nec lacus. Nunc suscipit vestibulum sem, a euismod mauris imperdiet et. Quisque gravida nulla sit amet magna posuere vel fringilla urna porta. Praesent rhoncus congue quam a gravida. Curabitur nisl erat, mattis non pharetra vel, tincidunt sit amet lorem. Donec tristique lacus luctus augue dapibus a semper eros suscipit.
</p>
<p>
Fusce interdum tincidunt felis, id ullamcorper urna gravida ac. Ut ut mi quam. Vestibulum ultricies consequat porta. Donec orci felis, viverra non sodales a, gravida id enim. Duis vulputate lacus et nunc fermentum eu elementum erat pharetra. Aliquam et quam tortor, in ultrices eros. Integer elit ipsum, cursus at varius sed, molestie a tellus.
</p>
</body>
</html>
The page is in quirks mode that's why it isn't working. Please add the suitable document type then it will work.
Example:
Add this to the top of the page and then try.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">