jQuery页面滚动智能定位
页面滚动时元素总是跟着你走，不管你怎么拉页面，它都乖乖贴在顶部，这种效果在多导航栏、提示条里都挺常见的。用jQuery来实现其实不难，核心就是监听$(window).scroll()事件，判断元素滚出视口没，切换position: fixed和position: static。
HTML 里先放个元素，比如一个
：
<div id="fixed-element">这是一个智能定位的元素</div>加载jQuery，写点逻辑就行：
$(document).ready(function() {
var fixedElement = $('#fixed-element');
var elementTop = fixedElement.offset().top;
$(window).scroll(function() {
var windowScrollTop = $(this).scrollTop();
if (windowScrollTop > elementTop) {
fixedElement.css('position', 'fixed').css('top', 0);
} else {
fixedElement.css('position', 'static');
}
});
});
这逻辑挺直观：拿到元素初始的位置，一滚动就判断当前滚动值跟它比，大了就固定住，小了就还原。
如果你想加点花活，比如滚到页面底部换个样式，或者在手机上别吸顶，配合媒体查询、窗口高度啥的都能搞。
另外，推荐几个相关资源，想玩得花点可以看：
如果你想快速搞定吸顶效果，又不想引太多复杂逻辑，用jQuery这种方式，还挺轻便的。
下载地址
用户评论
