前端开发中,对于滚动条位置的识别

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

代码如下,需要引入jQuery:

$(document).ready(function(){
    window.onscroll=function(){
            if($(document).scrollTop()>140){
                $(".nav_center").css({"position":"fixed","z-index":"999","top":"0","left":"0","width":"100%","background":"#007cb2"});
            };
            if($(document).scrollTop()<180){
                $(".nav_center").css({"position":"static","width":"1210px","margin":"0 auto","background":"none"});
            }
    }
});

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

发表评论
加载中...

相关文章