javascript - 折りたたみ可能なヘッダーがページに表示されなくなった瞬間に、固定ヘッダーをスクロールさせることはできますか?

Question

私たちは皆、折りたたみ可能なヘッダーをよく目にします。私はそれがページにもたらす効果が本当に気に入っています。この部門効果を達成したいのですが、固定ヘッダーの機能は本当に必要ありません。

これで、折りたたみ可能なヘッダーがページから外れるとすぐに固定ヘッダーが小さくなる、折りたたみ可能なヘッダーを見てきました。折りたたみ可能なヘッダーがページからはみ出した瞬間に、固定されたヘッダーを固定しないようにすることはできますか? そして、残りのコンテンツでページからスクロールしますか?

Answer 1

私はそれを試しました.これがあなたが望むものであることを願っています..デモについては下のリンクをクリックしてください..

デモ

これはHTMLです

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

n ここに CSS が入ります。

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 900px;
    height: 50px;
    margin: 0 auto;
    color: white;
    background:Red;
    z-index:10000;
    position:fixed;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

n これは Javascript です。

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});