<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<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')
var winTop = 0
$(window).on('scroll', function() {
if(winTop - $(window).scrollTop() > 0){
$navxf.removeClass('fixed-nav-appear');
}else{
$navxf.addClass('fixed-nav-appear');
}
winTop = $(window).scrollTop();
var height = document.body.scrollHeight - innerHeight - winTop
if(height < 1){
$navxf.removeClass('fixed-nav-appear');
}
})
</script>
</body>
</html>
在上面的CSS .fixed-nav-appear {top: -40px;}应该可以说是控制下拉距离的？可修改数字后发现并不能控制。
那么如何才能做到下拉多少距离后才开始隐藏？例如设置个下拉400px后才开始隐藏等。
