jQuery实现滚动后导航栏保持固定,及内容飞出显示

jQuery实现在鼠标滚动后导航栏保持固定 
<script>   
        $(document).ready(function() { 

              var navOffset=$(".header-bottom").offset().top; 

//offset();方法获取的元素相对于当前document元素的位置,可以将其理解为一个绝对位置 
             $(window).scroll(function(){ 
               var scrollPos=$(window).scrollTop(); 
               if(scrollPos >=navOffset){   
                    $(".header-bottom").addClass("fixed"); 
                 }else{   
                    $(".header-bottom").removeClass("fixed"); 
                }   
             });   
        });   
    </script> 

滚动条滚动到相应的位置内容飞出显示,如下,实现一个从右向左飞入的效果 

首先,设置一个开始的样式 

.content .row{ margin-left: 120%; // 设置与左边的外边距为120%,让内容在显示区外面 
}
 


然后,添加滚动事件 


$(document).ready(function() { 
        var navoffeset=$(".content2 .row").offset().top; 
        // 通过 offset().top,得到和document之间的距离 
        $(window).scroll(function(){ 
            var scrollpos=$(window).scrollTop(); 
            if(scrollpos >=navoffeset-500) {
 

// 注:这里的判断不是直接大于与document之间的距离,而是在这个距离的基础上减去500,这个值根据自己的情况进行调整 

// 为什么要减,因为页面本身有一个高度,还没有到和document之间的距离时,就已经能够可以看到内容显示了,而我们想在看到它时就去飞入 $(".content2 .row").animate({marginLeft: "200px"}); 


        }); 
    });

posted @ 2017-09-26 09:22  golddemon  阅读(1943)  评论(0编辑  收藏  举报