反向動畫菜單，使其僅移動

-2

我有下面的代碼，它在我的網站上動畫菜單，但我只希望它對小於800像素的屏幕產生影響。和我想它從屏幕的底部動畫隱藏反向動畫菜單，使其僅移動

在頭

<script> 
var didScroll; 

$(window).scroll(function(event) { didScroll = true; }); 
setInterval(function() { 
if (didScroll) { 
    $('#BN-nav').removeClass('BN-nav-show').addClass('BN-nav-hide'); 
    didScroll = false; 
}else{ 
    $('#BN-nav').removeClass('BN-nav-hide').addClass('BN-nav-show'); 
} 
}, 400); 
</script>

HTML

<nav id="BN-nav" class="row BN-nav-show "> ... </nav>

CSS

#B-navN { 
    position: fixed; 
    bottom: 0; left: 0; 
    z-index: 999; 
    width: 100%; min-height: 75px; 
    background-color: #fff; 
    } 

    #s-nav.BN-nav-hide { bottom: -75px; }

來源

2016-07-05 user3550879

什麼部分不會做你認爲應該做的事？ – TankorSmash

好吧，我似乎無法讓它在<800像素的屏幕上工作，但是看起來沒有問題的藝術是動畫設計，它可以很好地動畫 – user3550879

我建議嘗試使用此代碼。

var lastPos=0; 
 
$(window).scroll(function(event) { 
 
\t if (window.innerWidth < 800) { 
 
\t \t \t $('#nav-BN').addClass('BN-nav-hide').removeClass('BN-nav-show'); 
 
\t 
 
    clearTimeout($.data(this, 'scrollTimer')); 
 
    $.data(this, 'scrollTimer', setTimeout(function() { 
 
\t \t \t $('#nav-BN').addClass('BN-nav-show').removeClass('BN-nav-hide'); 
 
    }, 1000)); 
 
\t } 
 
});

#nav-BN { 
 
    position: fixed; 
 
    bottom: 0; left: 0; 
 
    z-index: 999; 
 
    width: 100%; min-height: 75px; 
 
    background-color: #fff; 
 
    bottom:-30px; 
 
\t transition:0.2s ease all; 
 
    } 
 

 
    #nav-BN.BN-nav-hide { bottom: -75px; } 
 
    #nav-BN.BN-nav-show { bottom: 0px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav-BN" class="row BN-nav-show "> NAV GOES HERE </nav> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

已經有與你原來的代碼相當多的問題，最大的一個很可能是試圖將類添加到導航的「導航-BN」 ID，你試過使用$('BN-nav')這看起來對於<BN-nav></BN-nav>（你應該使用`$（ '＃NAV-BN'）。

瞭解更多關於jQuery選擇here。

編輯：當用戶停止滾動時，根據重新出現的代碼進行更改。

來源

2016-07-05 22:21:17

啊，很好，但是你的代碼片段刪除了功能我的代碼（菜單在向下滾動時不會消失） – user3550879

當用戶進入頁面頂部時，導航將重新顯示。即使你只是向上滾動一點，你是否需要它回來？ –

正好，向上或向下它想要它消失然後回來時，當用戶停止滾動 – user3550879

窗口寬度可以從獲得窗口對象的innerWidth。

var windowWidth = window.innerWidth

可用作

if (windowWidth < 800) { 
    //code 
}

通常需要一個事件處理程序窗口大小調整事件更新保持變量。

window.onresize(function() { 
    windowWidth = window.innerWidth; // references previously declared variable 
})

也強烈推薦使用Request Animation Frame而不是滾動事件。有關更多信息，請參見this short tutorial。

來源

2016-07-05 22:14:52

反向動畫菜單，使其僅移動

回答

相關問題