我创建一个标题,一旦滚动到一定数量的像素,它修复并保持原位。
我可以使用css和html这样做,还是需要jquery吗?
我已经创建了一个演示,所以你可以理解。任何帮助将是伟大的!
body{ margin:0px; padding:0px; } .clear{ clear:both; } .container{ height:2000px; } .cover-photo-container{ width:700px; height: 348px; margin-bottom: 20px; background-color:red; } .small-Box{ width:163px; height:100px; border:1px solid blue; float:left; } .sticky-header{ width:700px; height:50px; background:orange; postion:fixed; }
解决方法
你需要一些JS来做滚动事件。最好的方法是为固定位置设置一个新的CSS类,当滚动超过某一点时,该类将被分配给相关的div。
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'); });
示例小提琴:http://jsfiddle.net/gxRC9/501/
编辑:扩展的例子
如果触发点未知,但是当粘性元素到达屏幕顶部时,可以使用offset()。top。
var stickyOffset = $('.sticky').offset().top; $(window).scroll(function(){ var sticky = $('.sticky'),scroll = $(window).scrollTop(); if (scroll >= stickyOffset) sticky.addClass('fixed'); else sticky.removeClass('fixed'); });