このCSSヘッダーを微調整して自動隠す？

Question

は、私は、ユーザーがスクロールダウンautohidesヘッダーを持っています。上にスクロールするとき、ユーザは、少なくとも350px *を上にスクロールしている場合は、ヘッダのみを再表示されるようにhttps://jsfiddle.net/6hgfw87b/7/

誰でも編集できますか？

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

*私は画像ユーザーが倍にちょうど画像の上を見てほんの少し上にスクロールしたい場合が背の高い350pxを持っています。

Answer 1

ここには[JSFiddle]（https://jsfiddle.net/okahara/jqq9zqez/1/）があります。ユーザーがスクロールダウンした後にヘッダーが非表示になり、ユーザーが少なくとも350ピクセル上にスクロールした場合、またはヘッダーがページの上部にある場合はヘッダーが元に戻ります。

このコードを正確にどのように使用するかわかりませんが、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> 

JS

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をスクロールダウンできるようにすることです。

私はそれが正しくないと私はそれを微調整することができます私に教えてください。