Navbar fadeIn и fadeOut

Question

У меня есть навигатор, у которого нет границы. Я хотел бы добавить границу на навигационной панели, когда она прокручивается с определенной осью Y, а затем возвращается к исходной панели навигации. На этом этапе я использую jQuery fadeIn и fadeOut, и я не могу заставить navbar работать правильно. Вот мои js для этого.

window.addEventListener("scroll", function() { 
if (window.scrollY > 500) { 

    $('.nav').fadeIn('slow'); 
} 
else { 
    $('.nav').fadeOut(); 
} 
},false); 

Вот мой index.html

<nav role="navigation" id="top-nav" class="navbar-fixed-top"> 
     <ul class="nav nav-pills" id="nav1"> 
      <li role ="presentation"><h1>Modern Concepts</h1> 
      <li role="presentation" class="first-Anchor"><a  href="#myAnchor">Inovate</a></li> 
      <li role="presentation"><a href="#myAnchorToo">Design</a></li> 
      <li role="presentation"><a href="#">Build</a></li> 
     </ul> 
    </nav> 

Вот мой CSS.

ul.nav { 
    display: none; 
    border: 3px solid black 

Answer 1

Каков текущий результат воздействия?

Просто дружественное напоминание: вы используете jQuery, но вы также используете собственные методы (windows.addEventListener). Может быть, идея избежать смеси и использовать свиток-событие jQuery (https://api.jquery.com/scroll/). Только для унифицированного стиля кода.

Answer 2

Возможно, мне что-то не хватает, но на основе того, что вы предоставляете, похоже, что вы скрываете меню изначально (отображение: нет) и отображаете его только после прокрутки пользователя через fadeIn. Так он работает, как вы просили.

Основываясь на ваших других комментариях, похоже, что вы не хотите fadeIn/fadeOut, но просто измените стиль (рамку). Если это действительно то, что вы хотите, затем определите класс для границы и используйте положение прокрутки для переключения этого класса.

Answer 3

Вы должны получить pageOffset окна, чтобы проверить, где вы находитесь в свитке ...

window.addEventListener("scroll", function() { 
    console.log(window.pageYOffset); 
    if (window.pageYOffset > 500) { 
     //do the magic 
    } else { 
     //go back to original state 
    } 
}, false); 

Вот рабочий пример с множеством различных настроек ... удачи:

http://jsfiddle.net/pu1yLe4u/2/