jQuery setzen Margin-Top für feste Kopfzeile beim Laden von der Mitte der Seite

Question

Ich habe eine einfache Scrolling-Header, der in der Größe abnimmt (aufgrund abnehmender Logo Höhe) und setzt den Rand oben auf dem Körper für die feste Überschrift.

Mein Problem ist, wenn ich die Seite mit dem scrollTop() über meine Kopfhöhe laden, wird der Rand oben zu klein eingestellt - wie mein Bild geschrumpft ist.

css:

body { 
    -webkit-transition: margin-top .2s ease; 
    transition: margin-top .2s ease; 
} 

.site-header { 
    position: fixed; 
    z-index: 110; 
    top: 0; 
    left: 0; 
    width: 100%; 
    border-bottom: 1px solid #555; 
    background: rgba(71,117,25,.9); 
} 

.custom-logo-link img { 
    max-height: 75px; 
    -webkit-transition: all .2s ease; 
    transition: all .2s ease; 
} 

.scrolling .custom-logo-link img { 
    max-height: calc(75px * .8); 
    -webkit-transform: translateX(25%); 
    transform: translateX(25%); 
} 

jquery:

jQuery(window).on('load', function(){ 

    marginTop(); 

    function marginTop(){ 
     var header = jQuery('.site-header'); 
     var headerHeight = header.height(); 
     var body = jQuery('body'); 

     body.css('margin-top', headerHeight); 
    } 

}) 
jQuery(window).on('scroll', function(){ 

    scrolling(); 

    function scrolling(){ 
     var header = jQuery('.site-header'); 
     var headerHeight = header.height(); 
     var scrollTop = jQuery(window).scrollTop(); 
     var flag = true; 

     if (scrollTop > headerHeight && flag){ 

      header.addClass('scrolling'); 
      flag = false; 

     } else { 

      header.removeClass('scrolling'); 
      flag = true; 
     } 
    } 
}) 

dev site: http://www.dev.mediaworksweb.com/cologeo-wp/

Edit:

Ich weiß, dass es nicht mein Körper funktioniert margen laden oben nur auf der Höhe des Logos basiert, wenn es gescrollt ist, passierte meinen Sollwert. Ich möchte auch nicht wirklich eine statische Höhe auf meinem Header und Rand oben auf dem Körper/was auch immer Container setzen.

Ich habe versucht, ein Duplikat meiner marginTop() -Funktion am else-Ende meiner scrolling() -Funktion hinzuzufügen, um es auf den oberen Rand der Seite zurückgesetzt, aber es war nicht korrekt (wahrscheinlich aufgrund der Übergänge?) .

Danke, Matt

Answer 1

Nun landete ich eine andere Funktion Aufsummierung (reset_marginTop()) und hatte einen Timeout zu verwenden, um meine Übergänge zu berücksichtigen. Ich wollte es nicht so machen, da es den marginTop jedes Mal neu einstellt, wenn er zum oberen Rand der Seite scrollt. Aber das ist, was ich verwende, wenn jemand überhaupt aussieht:

jQuery(window).on('scroll', function(){ 

function reset_marginTop(){ 
    var body = jQuery('body'); 
    var bodyMargin = parseInt(body.css('margin-top')); 
    var header = jQuery('.site-header'); 
    var headerHeight = parseInt(header.height()); 

    if (headerHeight > bodyMargin) { 
     body.css('margin-top', headerHeight); 
    } 

} 

scrolling(); 

    function scrolling(){ 
     var header = jQuery('.site-header'); 
     var headerHeight = header.height(); 
     var scrollTop = jQuery(window).scrollTop(); 
     var flag = true; 

     if (scrollTop > headerHeight && flag){ 

      header.addClass('scrolling'); 
      flag = false; 

     } else { 

      header.removeClass('scrolling'); 
      flag = true; 

      setTimeout(reset_marginTop, 200); 
     } 
    } 
})