Проблемы с реализацией hide navbar на прокрутке - JS

У меня есть фиксированная позиция navbar в моем блоге, и я пытаюсь реализовать простую JS, чтобы скрыть навигацию при прокрутке вниз. При появлении прокрутки навигационная панель снова появится. Сценарий для кода, который я пытаюсь реализовать здесь: https://jsfiddle.net/mariusc23/s6mLJ/31/Проблемы с реализацией hide navbar на прокрутке - JS

По какой-то причине я сталкиваюсь с проблемами, и я ударяю о стену. Вот мой код, если кто-то хотел бы помочь. Может ли проблема быть отзывчивой версией моего навигатора? Любые подсказки оценены.

Link to my site

// Hide Header on on scroll down 
 
var didScroll; 
 
var lastScrollTop = 0; 
 
var delta = 5; 
 
var navbarHeight = $('header').outerHeight(); 
 

 
$(window).scroll(function(event){ 
 
    didScroll = true; 
 
}); 
 

 
setInterval(function() { 
 
    if (didScroll) { 
 
     hasScrolled(); 
 
     didScroll = false; 
 
    } 
 
}, 250); 
 

 
function hasScrolled() { 
 
    var st = $(this).scrollTop(); 
 
    
 
    // Make sure they scroll more than delta 
 
    if(Math.abs(lastScrollTop - st) <= delta) 
 
     return; 
 
    
 
    // If they scrolled down and are past the navbar, add class .nav-up. 
 
    // This is necessary so you never see what is "behind" the navbar. 
 
    if (st > lastScrollTop && st > navbarHeight){ 
 
     // Scroll Down 
 
     $('header').removeClass('nav-down').addClass('nav-up'); 
 
    } else { 
 
     // Scroll Up 
 
     if(st + $(window).height() < $(document).height()) { 
 
      $('header').removeClass('nav-up').addClass('nav-down'); 
 
     } 
 
    } 
 
    
 
    lastScrollTop = st; 
 
}

.nav-up { 
 
    top: -40px; 
 
}

<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 
 
    <script src="/javascript/navhider.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<!--NAVBAR--> 
 
<aside id="shadow" class="nav-down"> 
 
    <div id="navbar"> 
 
    <nav> 
 
     <ul> \t \t \t \t 
 
     <li class="noselect"><a href="/">Home</a></li> 
 
     <li class="noselect"><a class="navlink" href="{{ "/contact" | prepend: site.baseurl }}">Contact</a></li> 
 
     <li class="noselect"><a class="navlink" href="{{ "/portfolio" | prepend: site.baseurl }}">Portfolio</a></li> 
 
     <li class="noselect"><a class="navlink" href="https://github.com/joelbitar1986">Github</a></li> 
 
     <li class="noselect"><a class="navlink" href="{{ "/blog" | prepend: site.baseurl }}">Blog</a></li> \t \t \t \t 
 
     </ul> 
 
     <div class="handle"><a id="menu-icon">&#9776;</a></div><!--On a mobile device this is the only list item displaying --> 
 
    </nav> 
 
    </div> 
 
</aside>

источник

2016-06-18 Joel Hoelting

я смог добиться успеха в том, что я хотел сделать, добавив этот скрипт index.html. Я также получил оригинальную скрипту для работы, заменив «header» на «в сторону» из моего собственного кода. Терпение окупается!

<script type="text/javascript"> 

     (function() { 

      var documentElem = $(document), 
       aside = $('aside'), 
       lastScrollTop = 0; 

      documentElem.on('scroll', function() { 
       var currentScrollTop = $(this).scrollTop(); 

       //scroll down 
       if (currentScrollTop > lastScrollTop) aside.addClass('hidden'); 
       //scroll up 
       else aside.removeClass('hidden'); 

       lastScrollTop = currentScrollTop; 

      }); 

     })(); 

    </script>

источник

2016-06-18 23:49:40

Проблемы с реализацией hide navbar на прокрутке - JS

ответ

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