Condensing-Code/Skript in Head-Tags

Question

Ich habe 3 Skripte in meinem Kopf hart-codiert, die alle auf verschiedene Elemente in meiner Website zielen. Die meisten von ihnen basieren jedoch auf ähnlichen Ereignissen (wenn Maus scrollt, usw.) Ich frage mich, ob es überhaupt kombiniert/verdichtet werden könnte. Ich habe es versucht, aber ich kann es nicht verkleinern und gleichzeitig die Funktionalität beibehalten.

Skript 1 - beseelt #nav weg, wenn der Benutzer scrollt dwn, bringt es, wenn nach oben gescrollt zurück

Skript 2 - beseelt ein zweites Menü (# nav-BN) auf < 768px Bildschirmen weg, wenn Benutzer einen Bildlauf nach oben oder unten

Script 3 - Häuten und zeigt ein div/button> 768px Bildschirme, versteckt es, wenn kleinere

<script> 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('nav').outerHeight(); 

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

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

function hasScrolled() { 
var st = $(this).scrollTop(); 
if (Math.abs(lastScrollTop - st) <= delta) 
return; 

if (st > lastScrollTop && st > navbarHeight) { 
// Scroll Down 
$('#s-nav').removeClass('nav-down').addClass('nav-up'); 
} else { 
// Scroll Up 
if (st + $(window).height() < $(document).height()) { 
$('#s-nav').removeClass('nav-up').addClass('nav-down'); 
} 
} 
lastScrollTop = st; 
} 
</script> 


<script> 
var lastPos=0; 
$(window).scroll(function(event) { 
if (window.innerWidth < 768) { 
     $('#nav-BN').addClass('BN-nav-hide').removeClass('BN-nav-show'); 

clearTimeout($.data(this, 'scrollTimer')); 
$.data(this, 'scrollTimer', setTimeout(function() { 
     $('#nav-BN').addClass('BN-nav-show').removeClass('BN-nav-hide'); 
}, 250)); 
} 
}); 
</script> 


<script> 
$(window).scroll(function() { 
if (window.innerWidth > 768) { 
    if ($(window).scrollTop() + $(window).height() > ($(document).height() - 200)) { 
     $("#up-btn").fadeIn(500); 
    } else { 
     $("#up-btn").fadeOut(500); 
    } 
    } else { 
     $("#up-btn").fadeOut(250); 
    } 
}); 
</script> 

Answer 1

Sie einige wichtige Dinge bemerken könnten:

• Ersetzen Sie mehrere jQuery Suche durch Speichern der Objekte in Variablen
• Ist nicht notwendig, zwei Klassen für ausgeblendet und angezeigt, können Sie eine Klasse namens "aktiv" anstelle von BN-nav-show, und falls diese Klasse fehlt es sollte

• if (window.innerWidth> 768) und (window.innerWidth < 768) in eine einzigartige Struktur zusammengefügt werden sein NB-nav-verstecken:

  if() { } else { }

Diese

<script> 
     var didScroll; 
     var lastScrollTop = 0; 
     var delta = 5; 
     var navbarHeight = $('nav').outerHeight(); 
     var $window = $(window); 
     var $upBtn = $("#up-btn") 

     var lastPos=0; 
     window.scroll(function(event) { 
     didScroll = true; 
     var $navBN = $('#nav-BN'); 

     if (window.innerWidth > 768) { 
      if ($window.scrollTop() + window .height() > ($(document).height() - 200)) { 
      upBtn.fadeIn(500); 
      } else { 
      upBtn.fadeOut(500); 
      } 
     } else { 
      navBN.removeClass('active');  
      clearTimeout($.data(this, 'scrollTimer')); 
      $.data(this, 'scrollTimer', setTimeout(function() { 
      navBN.addClass('active'); 
      }, 250)); 

      upBtn.fadeOut(250); 
     } 

     }); 

     function hasScrolled() { 
     var st = $(this).scrollTop(); 
     if (Math.abs(lastScrollTop - st) <= delta) return; 

     if (st > lastScrollTop && st > navbarHeight) { 
      // Scroll Down 
      $('#s-nav').removeClass('nav-down').addClass('nav-up'); 
     } else { 
      // Scroll Up 
      if (st + $(window).height() < $(document).height()) { 
      $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
      } 
     } 
     lastScrollTop = st; 
     } 


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

</script> 

Answer 2

Wenn Sie Sie können nicht ein Problem mit Toggle-Klassen helfen sollte, dann tun, dass

https://jsfiddle.net/9yhug2qg/1/

var windowST, navBar, navBarHeight; 
 

 
$(window).on('scroll', function() { 
 
    windowST = $(window).scrollTop(); 
 
    navBar = $('.navbar'); 
 
    navBarHeight = parseInt(navBar.height()); 
 

 
    if (windowST > navBarHeight) { 
 
    $(navBar).addClass('out-of-area'); 
 
    } else { 
 
    $(navBar).removeClass("out-of-area"); 
 
    } 
 
});

* { margin: 0;padding: 0; } 
 

 
body { height: 700vh; } 
 

 
.navbar { 
 
    position: fixed; 
 
    width: calc(100%); 
 
    height: 70px; 
 
    background-color: #0ff; 
 
    color: #fff; 
 
    transition: all 1s ease 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    visibility: visible; 
 
    width:calc(100% - 60px); 
 
    height: 60px; 
 
    background-color: #fff; 
 
} 
 

 
.navbar.out-of-area { 
 
    transform: translateY(-100px); 
 
} 
 

 
.navbar > .nav_btn { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #151515; 
 
    right: 4px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    cursor: pointer; 
 
    visibility: hidden; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .navbar > .nav_btn { visibility: visible; } 
 
    ul { visibility: hidden; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <nav class="navbar"> 
 
    <nav class="nav_btn"></nav> 
 
    <ul></ul> 
 
    </nav> 
 
</div>