Probleme beim Implementieren von hide navbar scroll - JS

Ich habe eine feste Position Navbar in meinem Blog und ich versuche, einfache JS zu implementieren, um die Navigationsleiste beim Scrollen nach unten zu verbergen. Die Navigationsleiste wird dann beim Scrollen wieder angezeigt. Die Geige für den Code, den ich hier implementieren möchte: https://jsfiddle.net/mariusc23/s6mLJ/31/Probleme beim Implementieren von hide navbar scroll - JS

Aus irgendeinem Grund bin ich in Probleme geraten und ich traf eine Wand. Hier ist mein Code, wenn jemand helfen möchte. Könnte das Problem die responsive Version meiner Navbar sein? Irgendwelche Hinweise geschätzt.

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>

Quelle

2016-06-18 Joel Hoelting

konnte ich in erfolgreich zu sein, was ich durch das Hinzufügen dieses Skript index.html tun wollte. Ich habe auch die originale Geige zum arbeiten bekommen, indem ich "header" durch "apart" von meinem eigenen Code ersetzt habe. Geduld zahlt sich aus!

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

Quelle

2016-06-18 23:49:40

Probleme beim Implementieren von hide navbar scroll - JS

Antwort

Verwandte Themen