[英]Revealing / Hiding Fixed Menu (jQuery)
I am trying to fix and animate a header navigation so that it pops down from outside of the browser window when a user scrolls past 80px from the top. 我正在尝试修复标题动画并为其设置动画,以便当用户从顶部滚动超过80px时,它从浏览器窗口的外部弹出。 I then want to reverse the animation when the user scrolls back past <80px.
然后,当用户向后滚动超过<80px时,我想反转动画。 I have gotten this far (have set throttle function earlier in the code):
我到目前为止(在代码前面设置了节流功能):
var e = $(window).scrollTop();
$(window).on("scroll", throttle(function() {
var t = $(window).scrollTop();
t > 80 ? t > e ? $(header).animate({
top: "-150px"
}, 200) :
At the 'else' point I am totally stuck. 在“其他”方面,我完全陷入困境。 I've been looking at other similar functions and trying to interpret the code but really struggling.
我一直在寻找其他类似的功能,并试图解释代码,但确实很挣扎。 Any help hugely appreciated.
任何帮助深表感谢。
Why are you comparing it with e
(which will be usually 0
). 为什么将它与
e
(通常为0
)进行比较。 That's no point. 没关系 If you want something to happen when the
window
's scrollTop
becomes 80px
, just use the following code. 如果您希望
window
的scrollTop
变为80px
时发生某些事情,请使用以下代码。 Also please not the single true
parameter in the animate
's stop()
function. 另外,请不要在
animate
的stop()
函数中使用单个true
参数。
$(function () { $(".peek-a-boo").css({ top: -200 }); $(window).scroll(function () { if ($(window).scrollTop() > 80) $(".peek-a-boo").stop(true).animate({ top: 0 }, 200); else $(".peek-a-boo").animate({ top: -200 }, 200); }); });
* {box-sizing: border-box;} .peek-a-boo {position: fixed; background-color: #99f; width: 100%; top: 0; left: 0; padding: 5px; text-align: center;} .heighter {height: 1000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="peek-a-boo">Peek</header> <div class="heighter"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.