Related
I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I have a page with the HTML element set to full height:
html{
height:100%;
position:relative;
}
My body element contains a repeating background image as a pseudo element:
body:before{
content: "";
border:2px solid blue;
display: block;
position:absolute;
bottom:0;
left:0;
background: url("https://website.com/uploads/background-repeat.png") repeat;
width: 100%;
height: 100%;}
Inside the body I have a #wrapper element where all the contents of my SPA live:
<body id="gradient">
<!-- Wrapper -->
<div id="wrapper">
<div id="header" />
<div id="content" />
<div id="footer" /> ...
</div>
However my body element does not expand with the wrapper's contents. How do make the background alway show whilst the user scrolls down the page instead of stopping at the first fold?
body not taking auto height because you are restricting its height to 100%. So just give min-height:100% and height: auto;.
Also you can directly give background to body no need of pseudo elements.
html {
height: 100%;
}
body{
width: 100%;
height: auto;
min-height: 100%;
background: url("https://website.com/uploads/background-repeat.png") repeat;
}
If you change body:before to body the image will repeat just fine:
html {
height: 100%;
}
body {
display: block;
position: absolute;
bottom: 0;
left: 0;
background: url("http://via.placeholder.com/150x150") repeat;
width: 100%;
height: 100%;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
Standard Repeat
You could also do a standard repeating image for the background:
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
Fixed Background
I don't know, are you trying to achieve a fixed background?
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
background-attachment: fixed;
}
h1,
p {
color: #333;
}
#wrapper,
#content {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
I want my top menu to be fixed and scroll with the page, but only when it get to the top of the screen.
Like here:
http://en.miui.com/forum.php
anybody knows how?
tnx :)
Either uses CSS' position:sticky with browser vendor prefixes or check the window's scrollTop when the element touches the top of the window and at the scrollTop or anything larger than it, fix the element with fixed positioning.
On scroll, when the scrollTop is less, give it relative positioning.
In jQuery:
$(window).on('scroll', function(){
// instead of 180 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=180){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
To check the number you want to use instead of 180, scroll to the point where the element touches the top, go into the developer console and type $(window).scrollTop() this should give you the number you are looking for.
HTML
<div class="navbar">Scroll Nav</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus purus lectus. Aenean vel feugiat quam. Ut placerat, tortor tincidunt malesuada faucibus, dolor justo tincidunt tortor, at aliquam risus nisi ac lorem. Quisque eu turpis in arcu iaculis ultrices. Morbi at viverra nibh, at dapibus ante. Vivamus ut justo nec urna bibendum tempus ut posuere diam. Cras sem ligula, semper eu arcu quis, condimentum pharetra nisi. Suspendisse vestibulum quis nibh at dictum. Morbi arcu quam, sollicitudin a ullamcorper vitae, mattis in nibh. Fusce id nisl elementum leo convallis sodales. Nam eget gravida lacus.</p>
<p>In metus ex, tristique nec ex vel, facilisis venenatis eros. Aliquam tempus, quam bibendum accumsan laoreet, risus odio vulputate nunc, sed varius felis enim in arcu. Fusce gravida ipsum tellus, in tristique purus pulvinar id. Praesent vulputate lorem tortor, vel tincidunt arcu accumsan ac. Cras molestie sem sem, et rutrum turpis semper sit amet. Aenean augue purus, imperdiet eget tempus vitae, suscipit eu odio. Etiam luctus est sit amet sapien faucibus, vel imperdiet ipsum sodales. Mauris viverra ut odio ut congue. Praesent vitae varius nunc. Pellentesque eleifend est sem, et fermentum nisl sagittis quis. Curabitur fermentum tempor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Quisque aliquet lobortis magna sed laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque bibendum, neque eu ornare eleifend, dui ligula euismod ipsum, a suscipit orci risus at justo. Curabitur posuere ante et massa varius, eu lacinia mauris vestibulum. Aenean consectetur nibh at augue tempor, sit amet luctus purus vestibulum. Ut efficitur, neque eget posuere feugiat, nulla diam molestie nisl, quis aliquet ante elit ac eros. Proin tristique felis risus, eget molestie felis pretium ut. Ut at lacus efficitur, feugiat ligula sed, tincidunt erat. Nam congue lacus dignissim dui eleifend mattis id ut ex. Duis vel consectetur urna. Nam vestibulum convallis risus faucibus ultricies. Aenean lorem dolor, vulputate quis porta sit amet, lacinia vitae ante. Proin commodo finibus vehicula. Cras purus eros, consectetur id libero eu, eleifend fringilla sem. Suspendisse potenti. Suspendisse potenti.</p>
<p>Maecenas accumsan iaculis diam id auctor. In congue, lectus eu fringilla suscipit, lectus nibh egestas elit, ac egestas erat neque sed risus. Nam convallis sem velit, id ornare lectus rhoncus ut. Integer nulla velit, imperdiet ac quam non, facilisis malesuada arcu. Vivamus ornare at elit ornare eleifend. Pellentesque vitae felis nec orci congue ultricies. Cras luctus odio nunc, sed euismod lectus egestas viverra. Aliquam volutpat molestie massa. Aenean sodales malesuada interdum. Phasellus semper pulvinar justo, non interdum sem consectetur in. Ut imperdiet mauris in dui luctus, nec hendrerit tortor pharetra. In hac habitasse platea dictumst. Suspendisse hendrerit, felis eu interdum ultricies, dolor metus fermentum massa, vitae iaculis felis nunc ut magna. Aenean ut ultrices orci. Suspendisse lectus turpis, dictum elementum sollicitudin vel, feugiat at dui. Suspendisse ut cursus sem.</p>
<p>Phasellus lacinia hendrerit commodo. Fusce hendrerit, purus in porttitor semper, metus tortor mollis sem, nec suscipit velit orci sed velit. Donec at leo bibendum erat imperdiet lobortis. Nullam dignissim sem sit amet mollis malesuada. Phasellus eu augue ultricies, euismod erat tristique, vulputate magna. Donec malesuada justo justo, ut egestas purus volutpat sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae rhoncus risus. Fusce mattis leo eros, ut tristique turpis ornare eu. Duis egestas euismod nulla eget iaculis. Aenean dictum, nunc facilisis egestas rhoncus, est dolor cursus libero, eget imperdiet metus nunc vel augue. Morbi purus augue, condimentum eu ullamcorper ac, cursus at neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Donec eu tempus nisl. Sed aliquam urna sit amet efficitur ullamcorper. Proin commodo neque id felis laoreet, id pulvinar ligula eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis, ex sit amet ullamcorper faucibus, odio augue luctus urna, et fermentum tortor velit ac magna. Nullam viverra magna at nisl fermentum, ac vulputate sem pellentesque. Donec in quam lectus. In a enim ultrices, dictum libero nec, consequat augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vulputate, tortor id faucibus semper, sapien felis vestibulum mauris, a eleifend enim massa id lacus. Mauris convallis enim vel cursus commodo.</p>
<p>Nunc dignissim tincidunt gravida. Ut pretium ex vel massa tincidunt, vel volutpat enim eleifend. Aenean dictum a mi in posuere. Quisque sit amet eros nunc. In finibus nisl in enim porta pharetra. Vivamus gravida vehicula lacus sed suscipit. Pellentesque elementum molestie lacus ut venenatis. Nunc efficitur gravida arcu, a blandit mi dictum ac. Mauris orci elit, luctus et metus ac, rutrum ullamcorper ipsum. Quisque quam felis, aliquam a pharetra id, efficitur sit amet elit. Aliquam volutpat luctus felis vitae vulputate.</p>
<p>Maecenas rutrum sodales ipsum tincidunt ultricies. Curabitur consectetur sodales sem vulputate mattis. Sed ac erat eros. Etiam suscipit arcu eleifend feugiat cursus. Maecenas ac facilisis tortor. Nullam nec facilisis nibh, sed fermentum elit. Sed vitae leo dui. Sed porta fringilla nibh nec vehicula. Nam et laoreet sapien, vel gravida leo.</p>
<p>Aenean eget semper nibh, eu suscipit mauris. Quisque venenatis ex ut consectetur porttitor. Integer at tortor semper, congue quam id, pellentesque erat. Quisque varius nunc enim, sed iaculis ipsum dictum ut. Nullam consectetur dapibus facilisis. Fusce faucibus, velit non lacinia interdum, nibh erat gravida sem, at tristique velit mauris a sem. Praesent a ipsum maximus, posuere diam eu, tincidunt velit. Proin sit amet turpis a augue consequat viverra eu iaculis metus. Nunc fringilla, lectus a lobortis volutpat, turpis turpis finibus nulla, sed placerat risus tellus vel massa. Cras ultrices porta tortor. Suspendisse tempus dui augue, non pretium nisl ornare a. Donec eu tempor sem. In pharetra sem sed sem ornare, in dictum turpis convallis. Curabitur rutrum lobortis urna, eu fermentum ex rhoncus vitae. Pellentesque ut imperdiet urna, et placerat ex. In a rhoncus augue.</p>
<p>Pellentesque ornare venenatis ante, vel pellentesque magna dictum nec. Integer gravida suscipit metus quis facilisis. Etiam non rhoncus nisl. In mi enim, laoreet id augue eu, pretium eleifend lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse fringilla, mi vitae convallis malesuada, orci mi pretium mi, sit amet bibendum nulla erat ac elit. Morbi dignissim consequat luctus. In ante libero, sollicitudin sit amet auctor vitae, laoreet ac erat. Phasellus scelerisque faucibus ex at blandit. Integer at turpis volutpat, vehicula eros quis, mattis urna. Vivamus a nulla iaculis, posuere purus eu, finibus dui.</p>
</div>
JS
var num = 50;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('no-scroll');
} else {
$('.navbar').removeClass('no-scroll');
}
});
CSS
.navbar {
background:#000;
color:#fff;
height:60px;
padding:10px;
position:absolute;
top:0px;
width:100%;
z-index:100;
}
.no-scroll {
position:fixed;
top:0;
}
.content {
position:relative;
top:100px;
z-index:0;
}
SEE FIDDLE
style normaly and add class or id for fixing to the top and style it.
now use jquery or javascript to get page Y offset and add fix class or id to the element..
$(document).ready(function(){
$(window).scroll(function(
if($(window).scrollTop() > 200px){
$('element').addClass('fixed');
}else{
$('element').removeClass('fixed');
}
));
})
hey guys, I have a web page in which I have an ad at the bottom of the page, now I want it that whenever a user scrolls down the page the ad should remain in the bottom only and also visible, something like sticky ad.... how could I achieve this?
Thanks in advance.
CSS Fixed positioning.
You can read about CSS positioning in general on the w3c. See http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning for fixed positioning in particular.
An example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>making an image stick to the footer of the webpage.</title>
<style type="text/css">
#myAdd {
position:fixed;
bottom:0px;
background:url(http://richard.jp.leguen.ca/images/ad.gif) CENTER NO-REPEAT;
height:80px;
width:100%;
text-align:-10000px;
}
</style>
</head>
<body>
<div id="myAdd">This is my add</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus gravida lorem, id molestie lectus tempus rhoncus. Curabitur vel augue ut metus scelerisque hendrerit at at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi hendrerit mattis tristique. Suspendisse fermentum justo in sem euismod pretium aliquet at erat. Phasellus lorem tellus, mollis in dictum sed, iaculis eu massa. Vestibulum iaculis aliquam massa, in porttitor lectus placerat vel. Pellentesque pharetra, orci non pretium porttitor, dolor justo placerat nisi, ut posuere sem enim id lorem. Vestibulum congue gravida enim, in faucibus sapien condimentum id. Nulla consequat arcu eu magna porta at consectetur nisl suscipit. Praesent pellentesque venenatis placerat. Suspendisse potenti. Pellentesque elementum auctor nibh sit amet mattis. Pellentesque rutrum porttitor libero, ac interdum tellus ultrices ultricies. Donec vehicula luctus nulla, eget cursus magna condimentum vitae. Aliquam eu enim mauris. Donec feugiat pulvinar nunc a dignissim. Aliquam placerat semper velit, eu venenatis tellus euismod vitae. Sed vitae justo massa, in luctus libero. Maecenas justo libero, fermentum semper ornare vitae, pulvinar eget magna.</p>
<p>Cras augue tellus, dignissim eu dapibus et, porttitor non sapien. Maecenas augue mauris, pulvinar id congue sit amet, pellentesque in dui. Sed ac fringilla nisi. Nam sit amet odio sed sem fringilla cursus. Nullam nibh mauris, ullamcorper ut facilisis ut, pellentesque ut nunc. Nulla ultricies iaculis sapien a eleifend. Curabitur pulvinar, velit et egestas aliquet, felis est luctus libero, in ultricies quam massa a tortor. Quisque vehicula imperdiet risus vitae accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel adipiscing nunc. Quisque consectetur mattis volutpat. Morbi viverra rutrum ante quis vehicula. Vivamus placerat bibendum mi eu auctor. Phasellus porta pharetra sagittis. Pellentesque id dui nec velit aliquam dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque pellentesque velit a mi mattis a consequat orci gravida. Morbi vel placerat sapien. Vivamus turpis ante, rutrum a ullamcorper sit amet, interdum ut tellus.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum augue arcu, aliquam vel elementum vel, iaculis ut lorem. Curabitur id nisi ac ipsum auctor sodales ut nec arcu. Vestibulum vitae risus in mi elementum mattis. Nulla imperdiet mattis enim, a ultricies magna fringilla eget. Maecenas vitae lacus sit amet eros cursus molestie at et dui. Morbi aliquam sagittis tellus ac placerat. Pellentesque vitae ante vitae sem imperdiet convallis. Donec sit amet tortor a ligula mollis dictum sit amet at purus. Sed ac sodales leo.</p>
<p>Sed vel est nec elit volutpat auctor. Mauris consequat, nulla eget accumsan euismod, neque dui ultricies justo, non vulputate elit felis non lorem. Donec venenatis pretium mauris quis interdum. Quisque vel augue at odio varius dignissim. Etiam tincidunt nunc nec diam faucibus faucibus. Praesent eget ligula vel nunc eleifend pharetra. Fusce pretium nisl libero. Nunc lacinia, ligula sed luctus sollicitudin, nulla nisl adipiscing odio, ac elementum nisl odio eget metus. Sed non eleifend massa. Praesent dictum neque non sapien fermentum pulvinar. Etiam vestibulum cursus elit eu vehicula. Vivamus et nunc lectus. Aliquam ac vestibulum nibh. Quisque a est nibh, id fringilla nisi. Pellentesque tristique euismod lectus. Vivamus dictum nibh eu ligula consequat sit amet viverra nunc posuere. Maecenas vitae erat ipsum. Aliquam a tempor velit. Donec eleifend neque id dui blandit vel eleifend risus lobortis. Aliquam erat volutpat.</p>
<p>In hac habitasse platea dictumst. Aenean facilisis orci sed ligula rhoncus condimentum. Aliquam lacus sapien, congue et commodo fringilla, tempus id neque. Donec vitae purus tortor. Nunc scelerisque rutrum lacinia. Ut est libero, tincidunt vel vulputate id, gravida non velit. Morbi et dolor sit amet turpis hendrerit consequat. Morbi ut felis adipiscing est eleifend lobortis. Cras vitae enim diam, et mattis dui. Proin volutpat risus sed nunc facilisis eleifend. Nunc eu interdum ipsum.</p>
<p>Ut fermentum interdum lectus pellentesque aliquet. In tincidunt turpis sit amet velit egestas condimentum auctor leo elementum. Maecenas fermentum sem at risus laoreet luctus sed id diam. Cras porttitor lacinia leo, porttitor condimentum eros mollis non. Phasellus tempus quam vulputate sapien scelerisque ultricies. Cras nunc sapien, rutrum vitae porttitor at, hendrerit a augue. Fusce eget felis nulla, at condimentum libero. Aliquam porta suscipit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa metus, faucibus sit amet sagittis ut, interdum non mi. Sed lacinia interdum pharetra. Integer pellentesque facilisis euismod. Vestibulum posuere, lorem quis dapibus viverra, sapien ipsum tempus nulla, vel cursus nibh ante nec arcu. Nullam feugiat elementum est eget gravida. Nam venenatis odio nec nulla faucibus vel ultrices metus mattis. Vestibulum ut rhoncus orci. Quisque nisl dolor, lobortis rutrum dapibus ac, pharetra ultricies tortor. In eu ante non est semper mattis. Fusce cursus, nulla eu pellentesque semper, arcu erat rutrum justo, sed condimentum velit ipsum eget elit. Fusce consectetur lacinia nibh lacinia scelerisque.</p>
<p>Vestibulum non nisi orci, a pulvinar enim. Curabitur gravida orci eget mauris laoreet non dignissim velit adipiscing. Vivamus vel ipsum risus. Duis bibendum tempus accumsan. Proin mollis pellentesque ullamcorper. Praesent ac lectus magna. Morbi condimentum vehicula rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras magna erat, euismod ut viverra ac, molestie a nisl. Aenean auctor, urna in venenatis accumsan, risus erat commodo nunc, porttitor sagittis sapien metus non mauris. Maecenas eget commodo dui. Maecenas mi metus, fermentum vitae lacinia sed, tristique vitae nunc. Morbi sed nulla nec orci vestibulum condimentum congue vitae leo. Pellentesque risus felis, euismod at convallis id, auctor nec purus. Pellentesque id ipsum augue, ullamcorper commodo arcu. Sed rutrum placerat dui et sollicitudin. Cras vel odio nunc.</p>
<p>In in nibh erat, vitae semper odio. Suspendisse feugiat turpis in leo consectetur gravida. In hac habitasse platea dictumst. Praesent vehicula ultrices ligula non tempor. Vivamus cursus mauris vel lacus malesuada aliquam. Maecenas egestas volutpat velit vitae fringilla. Vivamus rhoncus gravida faucibus. Nulla viverra iaculis lorem, ac adipiscing enim sodales eget. Duis cursus lacus nec odio molestie vulputate. Maecenas in risus at mi bibendum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis, quam in volutpat sagittis, ante ipsum auctor metus, bibendum mollis eros nunc ac massa.</p>
<p>Nullam facilisis lacinia magna, et semper ante pellentesque laoreet. Aenean vel turpis augue. Pellentesque eget quam eu sapien gravida fringilla at at dui. Vivamus posuere, massa condimentum laoreet aliquet, nulla metus mollis mi, in blandit libero ante quis nulla. Aenean luctus massa faucibus sem consectetur eu viverra turpis vestibulum. Suspendisse pharetra scelerisque posuere. Nulla adipiscing urna at lacus euismod nec feugiat odio ornare. In hac habitasse platea dictumst. Duis tempor tellus eget turpis tempus consectetur. Donec odio enim, vestibulum sit amet tristique quis, adipiscing eu massa. Nulla interdum scelerisque diam vitae accumsan. Nullam diam sem, tempus sed tempus ut, tincidunt vitae felis. Praesent viverra mattis rutrum.</p>
<p>Praesent consectetur, leo non aliquam molestie, nibh nunc tempus odio, in ullamcorper sapien tortor id dui. Maecenas vitae pretium eros. Praesent orci magna, feugiat a tincidunt eget, rutrum eu risus. Curabitur volutpat nunc eu turpis accumsan aliquet. Donec eu purus a diam cursus pellentesque sit amet suscipit dolor. Fusce sit amet leo non dui sollicitudin consequat nec eget justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent viverra mattis justo, non gravida urna cursus semper. Cras feugiat leo eget tellus porttitor at lobortis tellus sodales. Proin aliquet mi ut orci dictum congue. Maecenas vitae metus sit amet velit fermentum hendrerit eu non metus. Curabitur varius, turpis id tempus mattis, mi elit consectetur nisi, nec pharetra ipsum metus sed lacus. Nullam eget nunc diam. Proin a mi eget augue pretium tempus. Aliquam egestas laoreet elit, et viverra purus posuere quis. Donec laoreet urna augue. Maecenas id magna leo. Mauris vel lacus nibh, nec sodales tortor.</p>
<p>Aenean a sem ut augue faucibus dapibus. Vivamus imperdiet, urna eget egestas malesuada, diam libero pretium ligula, a ultricies purus elit ac ligula. Nunc vulputate, justo vitae suscipit adipiscing, orci ante dictum lectus, ac euismod leo nisl vitae est. Ut mattis, mi a feugiat adipiscing, eros nibh rhoncus lectus, eget aliquam urna neque id tortor. Nunc tristique sapien eu leo cursus ultricies aliquam risus posuere. Cras sodales laoreet augue ut fringilla. Etiam eleifend libero et elit commodo at venenatis nulla viverra. Nunc eu auctor risus. Phasellus vitae urna at sem pellentesque posuere nec at tortor. Cras porta malesuada risus, vitae porttitor velit ultricies eu. Nam dolor tortor, iaculis sed imperdiet nec, mollis ut dui. Aenean in metus neque. Sed tempor nulla et quam blandit facilisis. Proin sem tellus, faucibus id gravida at, dapibus auctor leo. Integer ornare, risus et ultricies pretium, magna nulla hendrerit quam, vitae viverra mauris dui eu magna. Aliquam vel erat quis libero feugiat fringilla porttitor in turpis. Phasellus vulputate accumsan facilisis.</p>
<p>Duis vehicula lobortis porta. Vestibulum auctor augue in odio adipiscing laoreet. Nunc arcu ligula, eleifend at ullamcorper blandit, porttitor quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum quam at lacus tempus scelerisque. Aliquam molestie consectetur dapibus. Quisque eget nisl ut purus tincidunt imperdiet a varius ante. Cras a urna odio, vitae lacinia nisl. Cras non lectus eu libero interdum accumsan. Fusce non tincidunt magna. Mauris at tortor quis lorem viverra congue.</p>
<p>Proin et sapien justo, auctor aliquam justo. Etiam elementum scelerisque augue. Nam tristique rutrum ante, ac accumsan sem lobortis ut. Integer eros elit, euismod non sollicitudin non, pellentesque vitae purus. Nam diam diam, vestibulum lobortis malesuada ac, pretium sit amet orci. Proin feugiat nunc lacinia metus congue et tincidunt sapien posuere. Sed urna felis, dignissim in volutpat vel, ullamcorper vel nunc. Sed eu odio metus, nec facilisis velit. Mauris pharetra mauris a nibh lacinia ut pulvinar leo sollicitudin. Quisque rutrum orci nunc. Praesent orci tellus, consequat ut semper non, gravida sit amet elit. Aenean ornare dui nec risus auctor non varius risus dignissim.</p>
<p>Nulla erat nunc, facilisis quis laoreet id, aliquet at ipsum. Nam nulla risus, elementum eget tempus vitae, ultrices ac magna. Donec at mauris id libero mollis vehicula egestas interdum nisl. Suspendisse in vehicula nulla. Integer enim magna, adipiscing ac dignissim in, hendrerit et est. Curabitur at risus nisl. Sed ornare nulla fringilla sapien fringilla nec tincidunt sapien rutrum. Donec in ligula vitae arcu imperdiet aliquam eu et urna. Curabitur congue, sapien at posuere consequat, ipsum risus sodales erat, non vestibulum sem libero nec nisi. Sed nec egestas erat. Pellentesque lobortis massa sed sem tincidunt in fringilla mi tincidunt. Curabitur imperdiet, erat non accumsan pulvinar, nisi magna gravida tortor, nec consectetur nulla turpis id lectus. Praesent lacinia auctor felis, nec varius nunc iaculis sed. Nunc eget tempor est. Nullam luctus ligula sed velit auctor elementum. Proin sit amet malesuada magna. Morbi venenatis augue et arcu eleifend mattis a nec erat.</p>
<p>Aliquam erat volutpat. Integer fringilla urna et lorem tincidunt porttitor. Sed varius posuere neque, sit amet pulvinar mauris faucibus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec ultrices nulla. Phasellus id justo leo. Aliquam consequat dui at neque ultrices placerat. Phasellus porttitor, nibh sit amet posuere tempus, magna turpis aliquet ante, at mattis leo purus et ante. Aenean semper varius risus non suscipit. Nullam at nisi orci, sed cursus leo. Phasellus vel purus a est rutrum volutpat.</p>
<p>varius neque non mauris aliquet mattis quis at nunc. Nunc quis turpis quis metus vehicula laoreet. Praesent faucibus interdum congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan mauris quis ante sollicitudin tempus blandit ligula semper. Sed aliquam porta ante, ac egestas leo sollicitudin quis. Aliquam ornare magna in diam rhoncus ut mattis nibh rutrum. Ut erat mi, cursus ac auctor et, tincidunt sed nibh. Nulla quam magna, dignissim non venenatis vitae, ullamcorper fermentum purus. Vivamus tempor bibendum ipsum vel mollis. Morbi vel lectus a arcu tristique ornare non in enim.</p>
<p>Proin non lorem lorem, nec dictum elit. Sed lectus purus, convallis et convallis sed, ornare et quam. Suspendisse potenti. Praesent non sem felis, a laoreet ipsum. Maecenas consectetur, neque eget lacinia sollicitudin, neque augue ultricies nunc, sit amet sollicitudin metus metus non ipsum. Integer molestie tristique faucibus. Proin sed mi sed elit egestas vehicula. Nam ac nulla vitae magna facilisis porttitor vitae ac justo. Vivamus tincidunt quam ac neque elementum quis ultrices magna ornare. Suspendisse vitae sapien leo, quis porttitor libero. Sed leo nulla, euismod in ullamcorper at, suscipit sit amet lacus. Fusce aliquet, augue ut pellentesque dictum, orci ligula aliquam felis, sed bibendum nulla dui sed elit. Sed suscipit lorem nec arcu convallis tincidunt.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed dictum ipsum a purus mollis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis sodales sapien vitae vestibulum. Cras sed elit quis diam viverra scelerisque. Proin non arcu non libero vehicula consectetur quis vel felis. Aliquam erat volutpat. Cras at vulputate tortor. Cras sagittis sodales leo sit amet tristique. Curabitur eu justo ac risus mattis fringilla nec vitae dolor. Mauris pharetra gravida leo, a dapibus odio aliquet eget. Vestibulum id orci neque, eu posuere neque. Mauris in varius leo. Pellentesque tempor interdum tempor. Maecenas aliquet, dolor sed venenatis vestibulum, nisl metus accumsan sapien, eu molestie dui nulla in ligula. Nam venenatis leo at nisl porttitor placerat placerat elit ultricies.</p>
<p>Donec ullamcorper, arcu eu pulvinar feugiat, elit velit tincidunt justo, sit amet porttitor leo tortor eu neque. In id odio eu mauris tristique sodales. Etiam erat erat, consequat a venenatis id, viverra eget nibh. Nam sollicitudin volutpat commodo. Nunc nulla arcu, commodo at interdum sit amet, tempor placerat ante. Nulla pellentesque, arcu non gravida rhoncus, tortor elit congue nibh, id tristique arcu enim ac turpis. Morbi vitae tellus lectus. Praesent ante odio, sagittis at interdum eu, dapibus vehicula metus. Mauris nisi nisi, pharetra ac hendrerit eu, luctus nec enim. Nam in dignissim orci. Vivamus lacinia, nisl in ornare imperdiet, nisi massa semper dui, in tristique sem neque et velit.</p>
<p>Vestibulum sodales placerat massa, sed iaculis purus mattis blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sit amet tortor in purus congue dictum. Donec a bibendum libero. Fusce a dui ullamcorper est hendrerit imperdiet eget nec dui. Nunc in eros a orci sagittis rutrum in sed massa. Nam convallis nisl vel nisl fermentum porttitor dignissim tellus vehicula. Phasellus sed velit velit. Sed at nisl vel risus viverra commodo. Nullam orci sem, porta quis accumsan vel, pharetra et augue. Vestibulum ut orci ut purus bibendum fringilla. Integer pretium ultrices lectus, et accumsan metus tempor varius. Etiam sit amet iaculis eros. </p>
</body>
</html>
CSS Position: Fixed;
Css can be a tricky beast, especially when you add IE into the mix.
I'm looking for a footer like facebook has but only use CSS to style it no js.
As you can see here http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1256.png it always stays at the bottom even if I scroll down. http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1258.png
For all browsers, save for IE6, do this:
div#footer {
bottom: 0;
width: 100%;
height: 25px;
position: fixed;
}
I know you mentioned not wanting to use JavaScript, but as for IE6, it's been my experience that you may have to resort to some sort of JavaScript expression in the CSS to get it to work as smoothly as this CSS does in other browsers.
This might do it:
http://ryanfait.com/sticky-footer/
I've used this in the past:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed CSS layer sample</title>
<style type="text/css">
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
}
#fixed
{
display:block;
bottom:0px;
left:0px;
right:0px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
}
* html #fixed
{
position:absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<p><h3>Some latin text here to make the page scroll</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pharetra pharetra tortor. Nunc in pede. Cras dapibus. Phasellus pede tortor, facilisis id, rutrum non, eleifend non, sem. Phasellus ut metus eu pede mollis sagittis. Cras ut justo ut metus rutrum auctor. Sed gravida consectetuer quam. Ut ligula. Suspendisse potenti. Ut et ante. Aenean mauris.</p>
<p>Praesent lorem. Praesent suscipit convallis orci. Morbi nec felis vitae est vehicula ornare. Quisque nisi neque, pretium ac, eleifend nonummy, cursus sit amet, purus. Nullam venenatis suscipit arcu. Aenean mattis enim vitae nisl. Maecenas diam pede, vehicula in, vehicula in, auctor ac, urna. Phasellus vel nibh scelerisque ante varius feugiat. Phasellus vehicula malesuada lorem. Donec elementum, elit vel cursus rhoncus, purus est nonummy leo, fermentum lacinia ante libero quis libero. Vivamus tincidunt, nulla et dapibus interdum, risus magna pharetra purus, eu adipiscing mi nisl eu massa. Donec elit arcu, scelerisque eu, suscipit quis, tincidunt ut, enim. Suspendisse eget justo vitae lectus euismod facilisis. Donec at ipsum nec mi sollicitudin viverra. Fusce accumsan, ante non dictum viverra, libero pede condimentum dolor, non congue nisl enim sit amet nulla. Aenean mollis, metus sed molestie bibendum, nulla erat tincidunt velit, non feugiat lorem mauris id mi. Mauris eleifend. Vivamus viverra. Fusce dapibus libero feugiat lorem.</p>
<p>Donec a nisl nec neque dictum varius. Aliquam consequat ipsum in dui placerat feugiat. Nam fringilla, libero ut consectetuer aliquet, lorem nisi pharetra est, eu sagittis lorem purus ac dolor. Donec aliquet mi nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium, est sed feugiat bibendum, odio ligula convallis pede, id aliquet erat turpis sit amet ipsum. Phasellus pulvinar laoreet arcu. Curabitur nunc. Ut id purus vitae lacus convallis consectetuer. Duis in quam. Praesent pharetra. In quis est a massa pretium auctor. Nam metus mi, pulvinar ac, blandit nec, suscipit semper, quam. Integer eget felis id enim sodales dictum. Phasellus quis neque. Duis cursus imperdiet lorem. Etiam eget risus et erat dapibus feugiat. Aenean gravida justo vitae lectus. Nullam aliquet. Integer et augue porttitor urna varius porta.</p>
<p>Suspendisse ultricies mauris eget velit dictum tincidunt. Maecenas id pede quis massa ornare congue. Fusce placerat odio non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dignissim nunc ac ipsum. Integer ac libero et risus luctus ultrices. Phasellus urna. Nunc a lorem eu diam mollis rhoncus. Curabitur velit mi, mollis sit amet, vulputate ut, varius lobortis, turpis. Nulla scelerisque euismod lacus. Phasellus vehicula justo sed diam. Sed non nisi sit amet sem posuere fermentum. Donec faucibus pede. Donec pharetra tristique lacus.</p>
<p>Maecenas luctus, nisl molestie gravida sagittis, quam augue elementum mi, vitae scelerisque lacus eros id mi. Pellentesque purus erat, hendrerit eu, suscipit eu, elementum quis, quam. Sed faucibus lorem lobortis ipsum. Nulla facilisi. In et leo et erat ullamcorper iaculis. Duis aliquet ipsum quis ligula. Sed condimentum, ipsum semper tincidunt tempus, nisi nulla congue ante, ut placerat ligula est eget risus. Nam nonummy molestie tortor. Nunc dapibus, metus id adipiscing mattis, felis enim pretium risus, ac elementum nibh massa at nulla. Duis eu dui nec lacus aliquet iaculis. Fusce et odio eu pede ultricies fermentum. Morbi pulvinar vulputate odio. Vestibulum dui ante, feugiat a, sodales at, tristique eu, dolor. Phasellus est. In in neque at lectus tristique pulvinar. Pellentesque sed nulla. Aliquam fermentum, diam eu auctor eleifend, velit elit scelerisque nulla, at dignissim odio justo id metus. Duis mattis rutrum mauris. Nullam quis nulla.</p>
<p>In justo tellus, elementum ac, aliquet egestas, luctus ac, pede. Nulla facilisi. Sed et dui. Suspendisse pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat lectus, fermentum at, iaculis quis, blandit non, eros. Donec libero turpis, laoreet vitae, volutpat in, molestie ac, nulla. Donec tempus. Aenean eleifend cursus velit. Duis dolor ipsum, commodo a, commodo ac, faucibus vitae, quam. Integer dignissim. Curabitur non elit. Ut aliquet eros sit amet nisi.</p>
<p>Sed consequat est vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec convallis, ligula sed rhoncus viverra, augue orci commodo massa, quis laoreet nulla lacus quis velit. Suspendisse a eros in massa sodales fermentum. Aliquam a augue. Sed nonummy eros eget magna dictum venenatis. Vestibulum molestie pede sit amet neque. Duis et ante ac eros mattis ultrices. Praesent placerat felis non nisl. Curabitur eleifend, purus non rhoncus lobortis, erat felis vestibulum est, at sagittis est orci ut orci. Aliquam pretium. Pellentesque eget neque. Nam sit amet tellus.</p>
<p>Integer ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla metus, auctor sit amet, semper ut, ullamcorper sit amet, eros. Maecenas aliquam metus ut metus. Suspendisse sed neque vel odio dapibus iaculis. Sed semper. Nulla et pede vel sapien laoreet interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus neque dolor, ultrices quis, molestie commodo, tempus vel, massa. Cras nec diam eleifend libero adipiscing aliquet. Duis malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat metus ac elit imperdiet tincidunt. Mauris pellentesque nunc eget lectus.</p>
<p>Proin id nunc sit amet mi lobortis aliquet. Ut eget felis sit amet nunc viverra lacinia. Maecenas ut nulla sed metus bibendum mattis. In hac habitasse platea dictumst. Aliquam consectetuer nunc vel neque. Nullam quam nisi, semper eget, faucibus nec, vehicula quis, mi. Nunc nisi. Donec massa metus, pharetra vitae, vehicula non, eleifend at, libero. Ut ac est a nunc rutrum vestibulum. Nulla gravida. Sed suscipit luctus augue. Aliquam posuere felis. Nunc interdum, nisi a blandit scelerisque, mi nibh blandit justo, et malesuada nibh ligula id ipsum. Donec a ipsum sed nunc placerat interdum. Curabitur blandit. Suspendisse varius faucibus dolor. Cras a urna. Mauris leo. Nunc pretium, pede ut posuere cursus, sapien tellus blandit massa, id vestibulum metus est vitae tellus. Maecenas urna.</p>
<p>Pellentesque tortor. Pellentesque faucibus dui vitae mauris. Pellentesque bibendum iaculis tortor. In sem purus, eleifend in, laoreet ut, tincidunt nec, magna. Mauris gravida, diam eu tincidunt fringilla, est nisi pharetra ante, non luctus justo odio a ipsum. Maecenas eu augue. Ut iaculis. Nunc arcu nunc, elementum sed, aliquam non, laoreet sed, nisl. Pellentesque felis. Suspendisse auctor tortor ut turpis. Vestibulum tincidunt laoreet neque. Phasellus odio enim, mollis vel, varius sed, imperdiet ut, tortor. Phasellus eleifend dolor ut metus. Proin est. Phasellus placerat pede rutrum libero. Suspendisse varius erat a urna convallis porta. Integer hendrerit odio id leo. Sed porta sapien suscipit sem.</p>
<p>Quisque a lorem. Duis quis tortor. Suspendisse mattis porttitor augue. Aliquam facilisis porttitor quam. In vel metus ut quam commodo viverra. Pellentesque et mauris sit amet eros adipiscing commodo. Maecenas vitae pede vitae diam viverra vestibulum. Integer suscipit, quam sit amet hendrerit porta, velit tellus rhoncus pede, eget sollicitudin arcu felis quis leo. Sed auctor blandit ligula. Fusce accumsan viverra nibh. Aliquam erat volutpat. Quisque velit velit, sagittis et, congue at, auctor eu, quam. Sed dui ipsum, rhoncus eget, commodo at, vulputate a, metus. Donec eu mi. Sed laoreet faucibus ipsum. Donec cursus egestas turpis. Nulla facilisi. Nam et tellus.</p>
<p>Praesent sagittis ligula eget lacus dictum blandit. Nam libero pede, faucibus non, vestibulum tempus, tincidunt quis, est. Vestibulum accumsan risus. Nulla facilisi. Praesent nisi turpis, pulvinar vitae, blandit vitae, hendrerit vel, ante. Morbi viverra purus dapibus quam. Donec ligula. Cras pretium metus. Nunc ac erat. Sed elit quam, cursus sit amet, egestas eget, cursus sit amet, orci. Praesent non purus non orci sodales interdum. Fusce lobortis risus eu est.</p>
<p>Quisque arcu nisl, fringilla vel, vehicula in, bibendum nec, arcu. Nullam sit amet mi nec velit cursus rhoncus. In sed ante. Aenean nec augue. Curabitur et sem laoreet dolor blandit aliquam. Mauris sollicitudin orci nec leo. Proin magna. Suspendisse eleifend, diam vitae mattis suscipit, felis risus varius massa, ut ornare eros pede nec ligula. Proin commodo, justo et egestas ultrices, tellus elit aliquam ante, a rhoncus felis risus elementum arcu. Quisque placerat mattis arcu. Etiam auctor auctor nisl. Ut sed purus. Donec semper iaculis arcu. Maecenas nulla. Sed congue euismod nulla. Vestibulum ligula justo, venenatis at, rhoncus ac, iaculis id, nunc. Morbi sit amet augue eu ipsum fermentum facilisis.</p>
<p>Nam magna. Fusce sed ante in mauris consectetuer mattis. Mauris imperdiet nibh tincidunt elit. Praesent eget lectus quis sem egestas molestie. Suspendisse potenti. Nunc mauris quam, pharetra id, gravida vitae, sodales id, lacus. Fusce lectus. Integer mollis justo. Duis vel mi et massa porttitor dictum. Donec scelerisque leo quis nulla. Sed ante ante, feugiat eget, vulputate a, dignissim quis, elit. Nam in turpis. Morbi lacus libero, varius at, dignissim id, auctor eget, urna. Cras in mauris. Vivamus felis purus, tempus at, volutpat eget, fermentum sagittis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Mauris mattis tincidunt erat. Maecenas aliquam mauris vel nulla. Morbi volutpat. Sed lorem mauris, interdum id, accumsan sit amet, consequat interdum, velit. Pellentesque ac est non sem posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae augue non lorem rhoncus malesuada. Phasellus viverra, leo non commodo ullamcorper, leo nibh accumsan mi, a tempus lectus lectus ac erat. Morbi ultrices mauris sit amet nunc. Donec porta nisl. Aenean tempor.</p>
</div>
<div id="fixed">[fixed footer]</div>
</body>
</html>
Might need some modification, especially to work in IE6. If I recall correctly, I had to add in some page breaks under the page content to stop the footer overlapping the content, but that aside, I think it worked fine.