|
阅读：7662回复：0
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"}); } }); }); |
|
|
公众号
