You need some JS to do scroll events. The best way to do this is to set a new CSS class for the fixed position that will get assigned to the relevant div when scrolling goes past a certain point.
HTML
<div class="sticky"></div>
CSS
.fixed {
position: fixed;
top:0; left:0;
width: 100%; }
jQuery
$(window).scroll(function(){
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= 100) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
Example fiddle: http://jsfiddle.net/gxRC9/501/
EDIT: Extended example
If the trigger point is unknown but should be whenever the sticky element reaches the top of the screen, offset().top
can be used.
var stickyOffset = $('.sticky').offset().top;
$(window).scroll(function(){
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
Extended example fiddle: http://jsfiddle.net/gxRC9/502/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…