調整這個CSS頭自動隱藏？

我有當用戶向下滾動是autohides頭：https://jsfiddle.net/6hgfw87b/7/調整這個CSS頭自動隱藏？

任何人都可以編輯它，以便向上滾動時，頭只能重新出現，如果用戶滾動了至少350像素*？

(function($) { 
    $(function() { 
    var scroll = $(document).scrollTop(); 
    var headerHeight = $('.page-header').outerHeight(); 
    $(window).scroll(function() { 
     var scrolled = $(document).scrollTop(); 
     // +100 by Me 
     if (scrolled + 100 > headerHeight) { 
     $('.page-header').addClass('off-canvas'); 
     } else { 
     $('.page-header').removeClass('off-canvas'); 
     } 
     if (scrolled > scroll) { 
     $('.page-header').removeClass('fixed'); 
     } else { 
     $('.page-header').addClass('fixed'); 
     } 
     scroll = $(document).scrollTop(); 
    }); 
    }); 
})(jQuery);

*我有圖片350像素高的，用戶有時可能只是想向上滾動只是一點點，看圖像的頂部。

來源

2016-08-24 user1946932

這裏是[JSFiddle]（https://jsfiddle.net/okahara/jqq9zqez/1/）。它在用戶向下滾動後隱藏了標題，並且如果用戶向上滾動了至少350px或者如果它們位於頁面的頂部，則將標題備份起來。

我不確定你究竟打算如何使用這段代碼，但想到350px，然後再次顯示標題有點有缺陷。提供的JSFiddle顯示了幾個350px高的圖像，如果從最底部向上滾動，標題將出現並覆蓋一些圖像。（只是我的想法）

HTML

<header class="outer page-header"> 
    Hi 
    <br> This 
    <br> is 
    <br> the 
    <br> header 
    <br> 
</header> 
<section class="page-content page-content-margin"> 
    <img src="http://placehold.it/150x350" /> 
    <img src="http://placehold.it/150x350" /> 
    <img src="http://placehold.it/150x350" /> 
    <img src="http://placehold.it/150x350" /> 
</section>

var lastScrollTop = 0; 
var goUp   = false; 
var goUpVal  = 0; 
$(window).scroll(function(event){ 
    var st   = $(this).scrollTop(); 
    if (st > lastScrollTop){ // downscroll code 
     goUp = false; 
     if (st >= 100){ 
      $('.page-header').addClass('off-canvas'); 
     } 
    } else { // upscroll code 
     if (!goUp) { 
      goUp = true; 
      goUpVal = st; 
     } 
     if (goUpVal - st >= 350 || st === 0) { 
      $('.page-header').removeClass('off-canvas'); 
     } 
    } 
    lastScrollTop = st; 
});

的CSS是準確的和你一樣。

*注意演示工作的唯一方法是使演示窗口大小很小，以便實際向下滾動過去350px。

讓我知道如果它不正確，我可以調整它。

來源

2016-08-25 06:46:50

謝謝你。幾乎正是我想要的。我假設'if（st => 100）'應該是'if（st> = 100）'？另外，在我的iPad（Chrome和Safari）上，如果我從頂部開始，然後從頂部向下滾動一下，標題將根據需要消失。但是，如果我再向上滾動，那麼頭部應該有一個空白區域。這可以解決嗎？（請注意，這是我自己的託管代碼而不是JSFiddle，因爲JSFiddle無法在我的iPad上正確顯示。） – user1946932

我將其更改爲以下內容以使用window.innerHeight - 它似乎工作：if（goUpVal - st> = 350 || st <= window.innerHeight）{ – user1946932

對不起，我直到現在纔看到這個。但是，你是正確的> =是正確的。 –

調整這個CSS頭自動隱藏？

回答

相關問題