Android用Chromeで見つかったような消えるヘッダーを作成します。

固定ヘッダーを使用してモバイルに最適化されたウェブサイトがあります。私は、Chrome for Androidと同様の方法で、ヘッダーに消えていく機能を実装することを考えていました。Android用Chromeで見つかったような消えるヘッダーを作成します。

挙動の要旨は、ヘッダアップユーザのスクロールが徐々にコンテンツに消えたとき、その後徐々に再表示されたヘッダが/表示— this questionは異なり’の答えをスクロールするときに完全に消失することです。

私の現在のヘッダーは次のようになります。

@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'); 
 
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 
header { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
header nav { 
 
    box-shadow: none !important; 
 
} 
 
#content { 
 
    margin-top: 56px; 
 
    padding: 10px; 
 
    background: #f5f5f5; 
 
}

<header> 
 
    <nav> 
 
    <div class="nav-wrapper"> 
 
     <a href="#" class="brand-logo">My Awesome Website</a> 
 
     <ul id="nav-mobile" class="right"> 
 
     <li><a><i class="material-icons">settings</i></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header> 
 

 
<div id="content"> 
 
    <p class="flow-text">This is where the rest of the website&rsquo;s content should be</p> 
 
    <br><br> 
 
    <p>Don&rsquo;t mind me, just adding a few blank lines to make this scrollable&hellip;</p> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div>

がどのように私はこの使用してjQueryのを実装することができますか？

出典

2017-01-07 SeinopSys

ソリューションは非常に簡単です：その後、実行し、スクロール位置を保存（あなたの一番上のスクロール可能なコンテナが何であれ、あるいは、一般的に言えば）<body>にscrollイベントをリッスンと位置が増加または減少したかどうかを確認します適切な処置（ヘッダの増減）’ s top）。

Math.minとMath.maxは、ヘッダーが画面を横切って飛行しないようにするために必要です。ビューポートの上に隠れるか、上に固定されるように上限値を制限します。

ここ’作業デモね：

(function($) { 
 
    var $body = $('body'), 
 
     $header = $('header'), 
 
     lastScrollTop = $body.scrollTop(); 
 
    var disappearingHeaderHandler = function() { 
 
    var scrollTop = $body.scrollTop(), 
 
     headerHeight = $header.outerHeight(), 
 
     headerTop = parseInt($header.css('top'), 10); 
 

 
    $header.css('top', 
 
     scrollTop > lastScrollTop 
 
     ? Math.max(-headerHeight, headerTop - (scrollTop - lastScrollTop)) 
 
     : Math.min(0, headerTop + (lastScrollTop - scrollTop)) 
 
    ); 
 

 
    lastScrollTop = scrollTop; 
 
    }; 
 
    $(window).on('scroll', disappearingHeaderHandler); 
 
    disappearingHeaderHandler(); 
 
})(jQuery);

@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'); 
 
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 
header { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
header nav { 
 
    box-shadow: none !important; 
 
} 
 
#content { 
 
    margin-top: 56px; 
 
    padding: 10px; 
 
    background: #f5f5f5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <nav> 
 
    <div class="nav-wrapper"> 
 
     <a href="#" class="brand-logo">My Awesome Website</a> 
 
     <ul id="nav-mobile" class="right"> 
 
     <li><a><i class="material-icons">settings</i></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header> 
 

 
<div id="content"> 
 
    <p class="flow-text">This is where the rest of the website&rsquo;s content should be</p> 
 
    <br> 
 
    <br> 
 
    <p>Don&rsquo;t mind me, just adding a few blank lines to make this scrollable&hellip;</p> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div>

出典

2017-01-07 13:42:33 SeinopSys

Android用Chromeで見つかったような消えるヘッダーを作成します。

答えて

関連する問題