jQuery ScrollTop（）函數動畫菜單

我有一個小問題，我嘗試使用jQuery在我的導航欄中創建動畫。我的導航欄動畫是這樣的：http://www.vogue.fr/?international 但我的問題是，只有當我在頁面的頂部時纔開始動畫。但我需要從用戶向上滾動或從任何地方向下滾動時開始動畫。jQuery ScrollTop（）函數動畫菜單

我的jQuery代碼：

$(document).ready(function() { 
$(window).scroll(function() { 
    if ($(document).scrollTop() < 1) { 
    $('nav').addClass('navYolo'); 
    $('nav').removeClass('navYo'); 
    $("ul").show(); 
} else { 
    $('nav').removeClass('navYolo'); 
    $('nav').addClass('navYo'); 
    $("ul").hide(); 
    } 
    }); 
});

如果有人能幫助我。非常感謝！

來源

2016-01-24 Quentin Malguy

你想在任何時候都顯示的標題？或者只顯示在向下滾動，但不滾動時？ –

感謝您的幫助，現在就完成了:) –

您可以確定滾動的方向並添加/刪除導航類。

var lastScrollTop = 0; 
 
$(window).scroll(function(event){ 
 
    var currentScroll = $(this).scrollTop(); 
 
    if ($(this).scrollTop() > lastScrollTop){ 
 
     $('nav').addClass('hidden'); 
 
    } else { 
 
     $('nav').removeClass('hidden'); 
 
    } 
 
    lastScrollTop = currentScroll; 
 
});

.wrapper { 
 
    height: 1000px; 
 
    background: red; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0px; 
 
    transition: height 0.3s ease 0s; 
 
    -webkit-transition: height 0.3s ease 0s; 
 
    -moz-transition: height 0.3s ease 0s; 
 
} 
 

 
nav.hidden { 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <nav></nav> 
 
</div>

來源

2016-01-24 22:49:46 smdsgn

非常感謝，您的解決方案很成功！ –

不客氣。 – smdsgn

我已經這樣做了，在這裏你可以精確地設置要針對滾動值，你甚至可以設置觀看設備的寬度，一些動畫你不想做在移動fe 這是代碼中最重要的部分，其餘部分位於鏈接中。我已經添加了不透明度變化和轉換函數，對不起，因爲沒有使用原生JS，這實際上很容易，但時間很短。

$(document).ready(function(){ 
var previousScroll = 0; 

$(window).scroll(function(){ 

var currentScroll = $(this).scrollTop(); 
var screenWidth = $(window).width(); 


if (currentScroll >= 0 && currentScroll < $(document).height() - $(window).height() && screenWidth > 800){}

鏈接到codepen

http://codepen.io/damianocel/pen/PZQVOR

來源

2016-01-24 23:14:53

jQuery ScrollTop（）函數動畫菜單

回答

相關問題