$(window).scroll(function(){
var sticky = $('.top-menu'),
scroll = $(window).scrollTop();
if (scroll >= 200){
sticky.addClass('fixed');
}else{
sticky.removeClass('fixed');
}
});
修正了css
.fixed{
position: fixed;
background: red;
z-index: 1;
}
它工作正常,但我想要“降低顶部效果”我能做到吗?
谢谢!
答案 0 :(得分:4)
为了平滑下滑动画,您可以尝试以下操作:
JS代码:
$(window).scroll(function(){
var sticky = $('.top-menu'),
scroll = $(window).scrollTop();
if (scroll >= 200){
sticky.addClass('fixed');
sticky.slideDown(1000);
}else{
sticky.removeClass('fixed');
sticky.removeAttr("style"); //slideDown adds the style="block" which needs to be removed so that next time slideDown will work
}
});
CSS代码:
.fixed{
position: fixed;
background: red;
z-index: 1;
display:none;
}
这里的逻辑是;添加'固定' 200px滚动后的课程。目前,sticky
将通过添加的CSS类display:none
。然后将其向下滑动以使其可见。如果用户向上滚动并低于200px,则移除fixed
类,并通过style
功能删除添加到sticky
的{{1}}属性。希望这会有所帮助。我尝试了它,它的工作方式与www.walmart.com
答案 1 :(得分:0)
我对css的东西不多,但我想这可能有用:
if (scroll >= 200){
sticky.slideDown();
sticky.addClass('fixed');
}else{
sticky.slideUp();
sticky.removeClass('fixed');
}
答案 2 :(得分:0)
答案 3 :(得分:0)
你可以尝试添加这样的代码,这样你就不必指定像素的高度:
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
}
document.addEventListener('scroll', onScroll);