[英]Revealing / Hiding Fixed Menu (jQuery)
我正在尝试修复标题动画并为其设置动画,以便当用户从顶部滚动超过80px时,它从浏览器窗口的外部弹出。 然后,当用户向后滚动超过<80px时,我想反转动画。 我到目前为止(在代码前面设置了节流功能):
var e = $(window).scrollTop();
$(window).on("scroll", throttle(function() {
var t = $(window).scrollTop();
t > 80 ? t > e ? $(header).animate({
top: "-150px"
}, 200) :
在“其他”方面,我完全陷入困境。 我一直在寻找其他类似的功能,并试图解释代码,但确实很挣扎。 任何帮助深表感谢。
为什么将它与e
(通常为0
)进行比较。 没关系 如果您希望window
的scrollTop
变为80px
时发生某些事情,请使用以下代码。 另外,请不要在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.