概述
技术拙劣,只为成长。
导航栏开始据顶部有一定距离,滚动之后接近浏览器顶部,在滚动之后不在变化,跟随浏览器窗口滚动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>跟随滚动</title>
<style>
body{position: relative;}
.se{position: fixed; top: 0;}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
var i=0;
$(window).scroll(function(){
i=$(window).scrollTop();
if(i>=400){
$(".x_box").addClass("se")
}else{
$(".x_box").removeClass("se")
}
})
</script>
</head>
<body>
<div style="width:100%; height:500px; background:#f00;"></div>
<div class="x_box" style="width:100%; height:50px; background:#ccc;">你看看我跟着屏幕动了吗?</div>
<div style="width:100%; height:5000px; background:#f00;"></div>
</body>
</html>
最后
以上就是调皮玫瑰为你收集整理的scroll()实现导航栏跟随滚动的全部内容,希望文章能够帮你解决scroll()实现导航栏跟随滚动所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复