jQuery ScrollTop() function animation menu

Question

У меня есть небольшая проблема, я пытаюсь использовать jquery для создания анимации в моем навигаторе. Моя анимация в навигационном режиме выглядит так: http://www.vogue.fr/?international Но моя проблема - запуск анимации, только когда я нахожусь наверху страницы. Но мне нужна анимация, когда пользователь прокручивается вверх или прокручивает вниз из любого места.

Мой 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(); 
    } 
    }); 
}); 

Если кто-то может помочь мне. Большое спасибо!

Answer 1

Вы можете определить направление прокрутки и добавить/удалить класс вашего навигатора.

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>

Answer 2

Я сделал это, здесь вы можете точно установить значение прокрутки для таргетинга, и вы даже можете установить ширину устройства просмотра, некоторые анимации вы не хотите делать на мобильном 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