Expandierende Marge mit Header

Question

Ich habe eine Kopfzeile, die, wenn Sie nach unten scrollen bleibt es in einem statischen Fluss und geht weg. Wenn Sie dann nach oben scrollen, erscheint die Kopfzeile an der Stelle, an der sich der Benutzer auf der Seite befindet. Das alles funktioniert super, aber wenn ich den ganzen Weg nach oben scrolle, werden meine Margen aufgrund des Kopfballs erweitert und dann, wenn es ganz oben angekommen ist, steigt der Margin wieder auf, um dem Kopfball zu entsprechen.

Ich habe ein Bannerbild mit einer Überlagerung. Scrollen Sie einige Male nach unten und scrollen Sie dann nach oben. Sie sehen den geänderten Rand mit dem Bild überlagert. Zusammen mit dem Header ist "zappelig".

Was kann ich tun, damit der Rand immer gleich bleibt und nicht wieder hochgleitet? Diese

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 { 
      if (st < navbarHeight) { 
      if (st === 0 || st < 1) { 
      $('header').css('position', 'static'); 
      } 
     } else { 
      $('header').css('position', 'fixed'); 
     } 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
} 


<header class="nav-down"> 
</header> 


header { 
    background: #F2F2F2; 
    height: 120px; 
    top: 0; 
    transition: top 0.5s ease-in-out; 
    width: 100%; 
    z-index: 100; 
    border-bottom: 1px solid #9C9C9C; 
} 
.nav-up { 
    top: -123px; 
} 

Answer 1

wird dadurch verursacht, dass, wenn Sie die position von header-fixed ändern bewirkt, dass es das DOM, um die gleiche height von header stupste werden, da Sie Header nicht mehr Effekt DOM Layout sind.

Das Update:

Würde margin-top mit der gleichen Höhe von Header anhängen, wenn Sie position: fixed auf Ihre #service-img hier gelten sie in Code ist (Ungeprüfte da Sie Live-Website verwenden):

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 { 
     if (st < navbarHeight) { 
      if (st === 0 || st < 1) { 
       $('header').css('position', 'static'); 
       $('#service-img').css('margin-top', '0px'); 
      } 
     } else { 
      $('header').css('position', 'fixed'); 
      $('#service-img').css('margin-top', '120px'); 
     } 
     // Scroll Up 
     if (st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
} 

EDIT:

Nur auf Ihrer Website mit meinem Code mit Chrome DevTools getestet und es funktioniert gut. Hoffe das hat geholfen!