JQuery实现轻量级滑动悬浮固定功能
滚动悬浮固定功能非常实用,特别是网站导航栏,以及文章目录等,用户体验超级棒。
网上有很多方法可以实现,不过大部分比较复杂(当然可配置的功能也很多),而且同时包含了 js+css 文件。但是,我们的需求往往很简单,希望尽量轻量。比较了数个方法后,觉得SF上的一个方法非常好,经过一番修改,更加灵活、好用了。原文网址放在文章最后。主要分为两部分代码,HTML 和 JS 部分。
HTML代码
<div style="height: 200px; background: #999"></div> <!-- 固定元素悬浮后,原来所在的位置会被空缺(height变成0), 导致页面闪跳且计算不准,所以必须设置一个确定高度的div框住 --> <div style="height:300px;"> <div class="fixed" style="height: 300px; background: green; text-align: center;">滚动悬浮块</div> </div> <div style="height:400px;background: #999"></div> <div class="bottom" style="height: 500px; background: red; text-align: center;">结束滚动块</div> <div style="height:800px; background: #999"></div>
HTML代码中主要定义了两个DIV,它们 class 分别为 fixed 和 bottom。fixed是滚动的时候要悬浮固定块,滚动到 bottom 时停止浮动。
JS代码
<script type="text/javascript"> $(function() { var fix = $('.fixed'); //滚动悬浮块 var end = $('.bottom'); //滚动到这个元素后结束固定 var fixTop = fix.offset().top, //滚动悬浮块与顶部的距离 fixHeight = fix.height(); //滚动悬浮块高度 var endTop, miss; //结束元素与顶部的距离 $(window).scroll(function() { //页面与顶部高度 var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); //如果有结束块 if (end.length > 0) { endTop = end.offset().top; miss = endTop - docTop - fixHeight; } if (fixTop < docTop) { fix.css({'position': 'fixed'}); if ((end.length > 0) && (endTop < (docTop + fixHeight))) { fix.css({top: miss}); //滚动悬浮块滑到结束块上时,top值为负,即慢慢隐藏出浏览器 } else{ fix.css({top: 0}); //滚动悬浮块未到结束块上时,top为0 } } else { fix.css({'position': 'static'}); } }) }); </script>
如果不需要结束块,直接不设置bottom,或者删掉这个class就可以了。
如果需要更加复杂的样式,可以把:
fix.css({'position': 'fixed'}); fix.css({'position': 'static'});
分别换成:
fix.addClass('scrollfix'); fix.removeClass('scrollfix');
其中,scrollfix 样式需要在 CSS 中定义。
原理分析
如下,蓝色方框是浏览器的范围,灰色是页面的高度,绿色是要悬浮固定块,滑动到结束块的时候停止悬浮。
滑动鼠标时,如果悬浮固定块与页顶距离 fixTop 大于页顶与浏览器顶部距离 docTop ,不悬浮固定。也就是执行最后一个 else 的内容,fix 的 position 为 static。如下图。
如果滚动固定方块与页顶距离 fixTop 小于页顶与浏览器顶部距离 docTop 时,开始悬浮固定。即 fix 的 position 为 fixed,而且固定块的 top 为 0,即保持固定在浏览器顶端。如下图。
悬浮过程中,如果到达结束块,而且结束块与页顶距离 endTop 小于 docTop+fixHeight,那么固定块的 top 就是他们之间的差,这个差是一个负值,所以悬浮块多余部分会向上超出浏览器,那部分看不到。如果继续滑动鼠标,固定块就会慢慢退出浏览器。如下。
了解了它的工作原理,就很容易把这部分代码嵌入到其他功能之中,实现更加复杂的应用。
参考资料:
- segmentfault,jQuery滚动页面当DIV到达顶部时固定在顶部,到底部是固定在底部