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"}); 

} 
        }); 
    });