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