從頁面中間加載時，jQuery爲固定頁眉設置頁邊距

我有一個簡單的滾動頁眉，其大小減小（由於徽標高度降低），並設置頁首上的頁邊距以考慮固定頁眉。從頁面中間加載時，jQuery爲固定頁眉設置頁邊距

我的問題是，當我用scrollTop（）加載頁面過去我的頁眉高度時，margin-top設置得太小 - 因爲我的圖像縮小了。

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

開發站點：http://www.dev.mediaworksweb.com/cologeo-wp/

編輯：

我意識到，這是行不通的加載我的身體與容限如果它滾動通過我的設定點，則只基於徽標高度。我也不太想在頭部和身體邊緣/任何容器上設置靜態高度。

我試圖在我的滾動（）函數的另一端添加我的marginTop（）函數的副本，以在到達頁面頂部時重置它，但它不準確（可能是由於轉換？）。

謝謝，馬特

來源

2017-07-13 Matthew Ediger

我不明白你的問題'我希望流暢地解決這個問題，而不是設置在header.'我沒有看到實際高度你在頭上設置一個高度。你想達到什麼目的？ –

我不想將標題的高度設置爲100像素（然後可以很容易地將margin-top設置爲100px並且沒問題）。我希望將margin-top調整到header的高度，而不用專門設置。 –

嗯，我結束了附加其它功能（reset_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); 
     } 
    } 
})

來源

2017-07-17 17:10:02

從頁面中間加載時，jQuery爲固定頁眉設置頁邊距

回答

相關問題