我正在研究导航栏的出现-消失,它出现在网页的标题上。要求是当用户向下滚动时它应该消失。因此使用以下 javascript 实现并运行良好。
// Header scroll to 200
$(function () {
$('#header').removeClass('header-small');
$(document).on('scroll', $(window), function () {
var scroll = $(window).scrollTop();
$(window).s
/* With offer slider 65 and with out offer slider */
var scrollToHeight = 35;
var sectionHeight = "135px";
if (scroll >= scrollToHeight) {
$('.navigation-all').slideUp(100);
$('.section').css('margin-top', sectionHeight);
$('#header').addClass('header-small');
$('.logo-text').slideUp(100);
$('.floating-cart').removeClass('myCartPopUpShow');
} else {
$('#header').removeClass('header-small');
$('.section').css('margin-top', '100');
$('.navigation-all').slideDown(300);
$('.logo-text').slideDown(300);
$('.floating-cart').addClass('myCartPopUpShow');
}
});
});
它在向下滚动 35 像素时消失。并在用户向上滚动到顶部时再次出现。 现在我想让它在用户稍微向上滚动时可见。
请告知我可以对现有脚本进行哪些更改。 提前致谢。
最佳答案
已更新!这是获得此效果的最简单方法,
演示:http://jsfiddle.net/yeyene/fnyxpw94/1/
JQUERY
var lastScrollTop = 0;
$(document).on('scroll', function () {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('#showHide_hd').slideUp(500);
} else {
$('#showHide_hd').slideDown(500);
}
lastScrollTop = st;
});
CSS
#fixed_hd {
position:fixed;
top:0;
left:0;
width:98%;
height:20px;
background:#dfdfdf;
padding:20px 1%;
}
#showHide_hd {
position:fixed;
top:60px;
left:0;
width:100%;
background:green;
padding:10px 0;
}
#content{
float:left;
margin:110px 0 0 0;
}
HTML
<div id="fixed_hd">Fixed Header</div>
<div id="showHide_hd">Show/Hide OnScroll Header</div>
<div id="content">
bla bla bla..
</div>
关于javascript - 如何在网页上出现-消失导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30602475/