2015-10-26 4 views
0

Я пытаюсь исправить и анимировать навигацию заголовка, чтобы она выскользнула извне окна браузера, когда пользователь прокручивает 80px сверху. Затем я хочу изменить анимацию, когда пользователь прокручивает назад < 80px. Я получил это далеко (установили дроссельную функцией ранее в коде):Выявление/скрытие фиксированного меню (jQuery)

var e = $(window).scrollTop(); 
$(window).on("scroll", throttle(function() { 
     var t = $(window).scrollTop(); 
     t > 80 ? t > e ? $(header).animate({ 
      top: "-150px" 
     }, 200) : 

В «еще» момент я полностью застрял. Я смотрел на другие подобные функции и пытался интерпретировать код, но действительно борется. Любая помощь очень ценится.

+0

Почему вы сравнивая его с 'é' (который будет, как правило, '0'). Это не вопрос. –

ответ

3

Почему вы сравниваете его с e (обычно это будет 0). Это не вопрос. Если вы хотите, чтобы что-то произошло, когда windowscrollTop становится 80px, просто используйте следующий код. Также, пожалуйста, не единственный параметр true в функции animatestop().

$(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>

Смежные вопросы