您需要一些JS来进行滚动事件。最好的方法是为固定位置设置一个新的CSS类,当滚动超过某个点时,该类将分配给相关的div。
HTML
<div ></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');});
编辑:扩展示例
如果触发点未知,但只要粘性元素到达屏幕顶部,触发点就应该
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');});
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)