jQueryは、ページの中央からロードするときに固定ヘッダーのマージントップを設定します。

Question

ロゴの高さが低くなるため、サイズが小さくなる簡単なスクロールヘッダーがあり、固定ヘッダーを考慮してマージンを設定します。

私の問題は、ヘッダーの高さを超えてscrollTop（）を使用してページを読み込んだときに、余白が小さすぎる - イメージが収縮するためです。

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のサイト：http://www.dev.mediaworksweb.com/cologeo-wp/

編集：私はそれは私の体のmargin-をロードするために動作しませんことを実現

ロゴの高さだけを基準にしています。私はまた、私のヘッダーとマージン・トップの静的な高さをボディ/どんなコンテナにでも設定したいとは思っていません。

スクロール（）関数のelse端にmarginTop（）関数の複製を追加しようとしましたが、ページの上部に到達してリセットしましたが、正確ではありませんでした。 。

おかげで、 マット

Answer 1

まあ、私は別の関数を（reset_marginTop（））を追加することになったし、私の遷移を説明するためにタイムアウトを使用する必要がありました。私はそれがページの上部にスクロールするたびにmarginTopをリセットするので、このようにしたくはありませんでした。しかし、これは誰もが今までに見える場合、私が使用していますものです：

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); 
     } 
    } 
})