Anzeigen von div auf Nach oben scrollen, aber in der Nähe des oberen Seitenrands ausblenden

Question

Ich benutze den folgenden Code, um ein div beim Scrollen auf der Seite und das Verbergen beim Scrollen zu zeigen. Es funktioniert wie erwartet, aber ich möchte auch das div 100px vom oberen Rand der Seite ausblenden, so dass es nicht meine Kopfzeile überlappt. Wie kann ich diesen Code anpassen (oder anderen Code verwenden, besser mit jquery?), Um dies zu tun?

Danke für jede Hilfe.

// Hide Header on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('#fixed 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 
    $('#fixed header').removeClass('nav-up').addClass('nav-down'); 
} else { 
    // Scroll Up 
    if(st + $(window).height() < $(document).height()) { 
     $('#fixed header').removeClass('nav-down').addClass('nav-up'); 
    } 
} 

lastScrollTop = st; 
} 

Answer 1

Ich würde vorschlagen, eine sauberere Version dieses Codes zu machen. Das Intervall ist nicht wirklich notwendig und verbraucht nur grundlos Ressourcen aus dem Browser. Sie können es so viel kürzer schreiben.

Mit JQuery:

var lastScrollTop = 0; 
 
$(window).scroll(function() { 
 
    var navbarHeight = $('#fixed-header').outerHeight(); 
 
    var scrollTop = $(this).scrollTop(); 
 
    //Scrolling Down or scrolled too far up 
 
    if (scrollTop > lastScrollTop || scrollTop < navbarHeight) { 
 
    $('#fixed-header').hide(); 
 
    } else { 
 
    //Scrolling Up 
 
    $('#fixed-header').show(); 
 
    } 
 
    lastScrollTop = scrollTop; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height: 100px; background-color: red; width: 100%; position: fixed;" id="fixed-header">Lorem Ipsum</div> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p>

Mit plain old JavaScript:

var lastScrollTop = 0; 
 

 
window.onscroll = function() { 
 
    var scrollTop = document.body.scrollTop; 
 
    var navbarHeight = document.getElementById('fixed-header').offsetHeight; 
 

 
    // Scrolling down or scrolled to far up 
 
    if (scrollTop > lastScrollTop || scrollTop < navbarHeight) { 
 
    document.getElementById('fixed-header').style.display = 'none'; 
 
    } else { 
 
    //Scrolling Up 
 
    document.getElementById('fixed-header').style.display = 'block'; 
 
    } 
 
    lastScrollTop = scrollTop; 
 
};

<div style="height: 100px; background-color: red; width: 100%; position: fixed;" id="fixed-header">Lorem Ipsum</div> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his. 
 
</p>