[英]Hide a div on scroll but keep it visible when active
我試圖在滾動時隱藏.site-header
並讓它在幾秒鍾不活動后重新出現。
我在這里找到了大部分答案: How to hide a Div when the scroll bar are move with jQuery?
var $header = $(".site-header"); var opacity = $header.css("opacity"); var scrollStopped; var fadeInCallback = function () { if (typeof scrollStopped != 'undefined') { clearInterval(scrollStopped); } scrollStopped = setTimeout(function () { $header.animate({ opacity: 1 }, "slow"); }, 500); } $(window).scroll(function () { if (!$header.is(":animated") && opacity == 1) { $header.animate({ opacity: 0 }, "slow", fadeInCallback); } else { fadeInCallback.call(this); } }); $('.menu-toggle').on('click', function(){ $('.menu-toggle').addClass('activated'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <section style="height:5000px;"> <div class="site-header" style="position:fixed; top:5px; left:5px; width:200px; height:100px; display:block; background:#000; opacity:1;"> <button class="menu-toggle">Menu</button> <nav class="nav-primary"> <ul> <li>Menu item 1</li> <li>Menu item 2</li> <li>Menu item 3</li> </ul> </nav> </div> </section>
通過單擊button
激活nav
但是, nav
嵌套在.site-header
,這意味着當菜單被激活時,它仍然會在滾動時淡出......
我想知道如何更改此 javascript,以便將.activated
類應用於button
,即使在滾動時nav
保持可見。
這是小提琴https://jsfiddle.net/fwa16eok/
非常感謝!
在淡出動畫調用之前添加!$menu.is(":active")
var $menu = $("#menu"); var opacity = $menu.css("opacity"); var scrollStopped; var fadeInCallback = function () { if (typeof scrollStopped != 'undefined') { clearInterval(scrollStopped); } scrollStopped = setTimeout(function () { $menu.animate({ opacity: 1 }, "slow"); }, 2000); } $(window).scroll(function () { if (!$menu.is(":active") &&!$menu.is(":animated") && opacity == 1) { $menu.animate({ opacity: 0 }, "slow", fadeInCallback); } else { fadeInCallback.call(this); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <section style="height:5000px;"> <div id="menu" style="position:fixed; top:5px; left:5px; width:200px; height:100px; display:block; background:#000; opacity:1;"></div> </section>
HTML:
<div>
<div class="a">A</div>
</div>
Javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.a').fadeOut(); }
else {
$('.a').fadeIn();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.