87,907
社区成员
发帖
与我相关
我的任务
分享JS/JQ如何判断页面滚动到底部后，导航条顶部浮动？
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fixed-nav{
position: fixed;
width:100%;
top:-40px;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fixed-nav-appear{top:0;}
</style>
</head>
<body>
<div id="Jnav">
11111111<br />222222
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $navxf = $('#Jnav'), navTop = $navxf.offset().top, navH = $navxf.outerHeight(),winTop_1=0,winWidth=$(window).width(), holder=jQuery('<div>');
$(window).on('scroll',function(){
var winTop_2 = $(window).scrollTop();
holder.css('height',navH);
//开始浮动，不过不显示,
if(winTop_2>navTop && winWidth>980){
holder.show().insertBefore($navxf);
$navxf.addClass('fixed-nav');
}else{
holder.hide();
$navxf.removeClass('fixed-nav');
}
//判断鼠标向上滚动，显示出。
if(winTop_2>winTop_1 && winWidth>980){
$navxf.removeClass('fixed-nav-appear');
}else if(winTop_2<winTop_1){
$navxf.addClass('fixed-nav-appear');
}
winTop_1 = $(window).scrollTop();
})
</script>
</body>
</html>
目前这段代码是鼠标向上滚动导航条在顶部出现浮动效果。现在想添加个判断：滚动到页面底部导航条在顶部出现浮动。也就是和这个网站导航条一样www.lcwlltd.com
...全文
请发表友善的回复…
发表回复
jio可 2020-10-21
- 打赏
- 举报
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fixed{
width: 100%;
position: fixed;
background: red;
color: #fff;
}
body {
margin: 0;
height: 100%;
overflow: auto;
}
.nav {
height: 50px;
line-height: 50px;
text-align: center;
}
.content{
width: 100%;
overflow: auto;
height: 2000px;
text-align: center;
border: 1px #ccc solid;
}
</style>
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
导航栏
</div>
<div class="content">
<div>内容</div>
</div>
<script>
document.addEventListener('scroll', function(e) {
// 当前可使高度值
var h = window.innerHeight
// 当滚动到当前窗口最小高度的时候
if (e.target.body.scrollHeight - e.target.body.scrollTop <= h) {
$('.nav').addClass('fixed')
} else {
$('.nav').removeClass('fixed')
}
})
</script>
</body>
</html>
weixin_50944805 2020-10-21
- 打赏
- 举报
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fixed-nav {
position: fixed;
width: 100%;
top: 0;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}
.fixed-nav-appear {
top: -40px;
}
</style>
</head>
<body>
<div id="Jnav" class="fixed-nav">
11111111<br />222222
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $navxf = $('#Jnav')
// navTop = $navxf.offset().top,
// navH = $navxf.outerHeight(),
// winTop_1 = 0,
// winWidth = $(window).width(),
// holder = jQuery('<div>');
var winTop = 0
$(window).on('scroll', function() {
if(winTop - $(window).scrollTop() > 0){
// $navxf.show().insertBefore($navxf);
$navxf.removeClass('fixed-nav-appear');
}else{
// holder.hide();
$navxf.addClass('fixed-nav-appear');
}
winTop = $(window).scrollTop();
var height = document.body.scrollHeight - innerHeight - winTop
//console.log(height) // 滚动底部变成 0
if(height < 1){
$navxf.removeClass('fixed-nav-appear');
}
// holder.css('height', navH);
// //开始浮动，不过不显示,
// if (winTop_2 > navTop && winWidth > 980) {
// holder.show().insertBefore($navxf);
// $navxf.addClass('fixed-nav');
// } else {
// holder.hide();
// $navxf.removeClass('fixed-nav');
// }
// //判断鼠标向上滚动，显示出。
// if (winTop_2 > winTop_1 && winWidth > 980) {
// $navxf.removeClass('fixed-nav-appear');
// } else if (winTop_2 < winTop_1) {
// $navxf.addClass('fixed-nav-appear');
// }
// winTop_1 = $(window).scrollTop();
})
</script>
</body>
</html>
jio可 2020-10-21
- 打赏
- 举报
判断滚动高度到了某个范围就给导航加一个class
