使用標題擴展邊距

Question

我有一個標題，當您向下滾動時，它保持靜態流動並消失。然後，當您向上滾動時，標題會出現在用戶所在的頁面上。這一切都很好，但是當我一直滾動到頂部時，我的邊距由於標題而擴展，然後一旦達到頂部，邊距就會回升以匹配標題。

我有一個覆蓋橫幅圖像。向下滾動，然後向上滾動。您將看到圖像疊加後改變的邊距。隨着頭是'煩躁'。

我該怎麼做，因此保證金總是保持不變並且不會推回來？

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

這是因爲當您更改的header的position到fixed它會導致因爲你頭不再影響的DOM佈局的DOM被輕推起來的header相同height引起。

的修復：

將追加margin-top與頭部的同一高度，當你申請position: fixed您#service-img這裏是代碼（未經測試，因爲你正在使用活動站點）：

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

編輯：

剛剛測試您的網站與我的代碼使用Chrome開發工具，它工作正常。希望有所幫助！