Satır yukarı kaydırmayı ancak sayfanın başına yakın gösterme

Question

Sayfada ilerlerken ve aşağıdayken gizlenirken bir div göstermek için aşağıdaki kodu kullanıyorum. Beklendiği gibi çalışıyor, ancak sayfanın üst kısmındaki div 100px'i de gizlemek istiyorum. Bunu yapmak için bu kodu nasıl değiştirebilirim (ya da farklı bir kod kullanabilir miyim? Belki de jquery ile daha iyi?)

Yardımlarınız için teşekkür ederiz.

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

Bu kodun daha temiz bir sürümünü oluşturmanızı öneririm. Aralık gerçekten gerekli değildir ve sadece sebepsiz bir şekilde tarayıcıdan kaynak ayırmaktır. Bunu daha kısa yazabilirsin. düz eski JavaScript kullanarak

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>

:

JQuery kullanarak

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>