前端对于滚动条位置识别

  143 次阅读

CONTENT

最近在上班空闲之余制作新的小说模板,这半个多月来学了很多东西,感觉能很快派上用场。因为突发奇想,我想实现导航栏的特效,无非就是当屏幕滚动到一定位置的时候,导航栏脱离出来,改变样式并且悬浮在顶部,很多网站也是使用了这种方法,最终的效果还是相当不错的,导航不需要总是保持置顶,也不需要访问者手动再回到顶部。以后可能会经常用,所以决定记录下来。

代码如下,需要引入 jQuery:

  1. $(document).ready(function() {
    
  2.     window.onscroll = function() {
    
  3.         if ($(document).scrollTop() > 140) {
    
  4.             $(".nav_center").css({
    
  5.                 "position": "fixed",
    
  6.                 "z-index": "999",
    
  7.                 "top": "0",
    
  8.                 "left": "0",
    
  9.                 "width": "100%",
    
  10.                 "background": "#007cb2"
    
  11.             });
    
  12.         };
    
  13.         if ($(document).scrollTop() < 180) {
    
  14.             $(".nav_center").css({
    
  15.                 "position": "static",
    
  16.                 "width": "1210px",
    
  17.                 "margin": "0 auto",
    
  18.                 "background": "none"
    
  19.             });
    
  20.         }
    
  21.     }
    
  22. });

我要实现的效果就是,当滚动到一定位置的时候,网页的导航变为置顶且不随滚动条改变位置,当滚动条回归的时候,又恢复成原来的状态、scrollTop() 就是用于对位置的识别,这样就可以通过 css() 方法改变区块样式。

Comments | NOTHING

暂无评论...