<html>
<head>
<meta charset='utf-8'/>
<title>jq 滚动到指定位置导航栏置顶</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<script src="/ceshi/jquery-3.1.1.min.js" type="text/javascript"></script>
</head>
<style>
#gift-type-list-top{
position:fixed;
top:0;
left:0;
z-index: 999
}
</style>
<body>
<div style="height:500px;background: red;"></div>
<div style="height:300px;background: #ccc;" id='topai'></div>
<div style="height:500px;background: red;"></div>
<div style="height:300px;width:100%;background: #fff;" class='topbi'>置顶</div>
</body>
</html>
<script>
$(function(){
// 导航置顶
$(document).ready(function(){
$(window).scroll(function() {
var top = $("#topai").offset().top; //获取指定位置
var scrollTop = $(window).scrollTop(); //获取当前滑动位置
if(scrollTop > top){ //滑动到该位置时执行代码
$(".topbi").attr("id","gift-type-list-top");
}else{
$(".topbi").removeAttr("id");
}
console.log(scrollTop)
});
});
})
</script>
11-23
2435
2435
06-06
1391
1391
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
