2

スティッキーヘッダーについて質問があります。私のウェブサイトには、幅/高さが 100% の画像を含む「トップ」の div があります。ユーザーが下にスクロールすると、一番上の div が離れてスクロールし、メインの div/コンテンツが表示されます。しかし、ユーザーがページの上部にあるときに「メニュー」ヘッダーが表示されないように、上部の div のすぐ下に「スティッキー」ヘッダーを配置したいので、上部の画像のすぐ下に貼り付けてフックする必要がありますスクロールが「通り過ぎる」とき。これは可能ですか？

よろしくお願いします！

これが私のコードの一部です。メニューがトップ画像の真下になるように修正しましたが、スクロールに追従しません。どうしたの？

ありがとう！

HTML:

<header id="top">
(The big picture)
</header>

<div id="logo">
<img src="logo" alt="Logo">
</div>

<div class="container">

<div id="sub_header">
    <div id="menu1">
        Content
</div>
</div>

CSS:

#sub_header { height:53px; width: 100%; padding:5px 0; }
#sub_header.sticky { position:fixed; top:100px; left:0px; right:0px; z-index:99999; }

jQuery:

$(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > body) {
            $("#sub_header").addClass("sticky");
        } else {
            $("#sub_header").removeClass("sticky");
        }
    });
});
4

0 に答える 0