0

このサイトとまったく同じように、スクロール イベントで変化するヘッダーを作成したいと考えています。カーソルがページ ヘッダーの上にある場合、表示が異なります。下にスクロールすると、ヘッダーの内容が変更され、固定されます。

これらの例 (および他の多くの例) を見つけましたが、縮小して修正されるだけで、ヘッダーの内容はまったく変更されません。

注:可能であれば、多くの js ファイルのように、読み込み時にページの速度を低下させるサードパーティ製のパッケージを含まないもの。

ありがとう

  1. jQuery と CSS を使用したスクロール時の固定ヘッダー
  2. 永続ヘッダー

例えば：

window.onscroll=function ()
{
   //Based on given offset like 100px maximum
   if (scroll == down)
   {
     //Display header_2 as fixed header
   }
   else
   {
     //Display header_1 as fixed header
   }

}

<div class="container">
   <div id="header_1">BIG HEADER with no menu</header>
   <div id="header_2">SMALL HEADER with menu only</header>
</div>
4

3 に答える 3

2

このようなもの：

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top add fixed position css to element
            $("#header").css('position','fixed');
            $("#menu1").css('display', 'none');
            $("#menu2").css('display', 'block');

        } else {
        // otherwise reset the css.
            $("#menu2").css('display', 'none');
            $("#menu1").css('display', 'block');

        }
    });
});
于 2013-06-11T10:30:01.337 に答える