2

ユーザーが下にスクロールすると、上部に「固定」される「スティッキー ナビゲーション」があります (関数はその位置を :fixed, top:0 に変更します)。また、ページの上部に「expandalbe」サインイン エリアがあります。最初の問題は、ページの上部にあるサインイン領域を拡大したとき、ナビゲーションバーが「くっつく」ポイントでした。パネルが開いているときにくっつくようになりましたが、閉じると間違ったポイントにくっつきます（#panel の追加の高さのポイントにくっつくようです）。フィドルを見る

#sticky_navigation が両方のケースで top:0 に固定されるようにするにはどうすればよいですか? - #panel が開いている場合と閉じている/デフォルトの場合

(デッド YouTube リンクは削除されました)

ありがとう

   **// FIRST VERSION sticky navigaiton ------------//**
   $(document).ready(function(){
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;             
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 })
        } else {
            $('#sticky_navigation').css({ 'position': 'relative' });
        }       
    };

    sticky_navigation();

    $(window).scroll(function() {
         sticky_navigation();
    });

});

更新: #panel が開いている場合にのみ機能するようになりました。閉じている場合、#sticky_navigation は開始されません。

//sticky top nav PANEL OPEN ONLY
$(document).ready(function(){
    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation2 = function(){

        var scroll_top1 = $(window).scrollTop(); // our current vertical position from the top
            scroll_top1 = $(window).scrollTop() - $('#panel').height();
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top1 > sticky_navigation_offset_top ) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 })
        } else {
            $('#sticky_navigation').css({ 'position': 'relative' });
        }  

    };

    // run our function on load
    sticky_navigation2();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation2();
    });

});
4

1 に答える 1

2

次のようなことを試してください：

$(document).ready(function() {

    $("#open").click(function() {
        var stickTop = $("div#sticky_navigation").offset().top;
        $("div#panel").slideDown("swing");
        $('#sticky_navigation').css('top',$("div#panel").height());

    });

    $("#panel").click(function() {
        $("div#panel").slideUp("swing");
        $('#sticky_navigation').css('top',stickTop);
    });


    $("#toggle a").click(function() {
        //$("#toggle a").toggle();
    });

});​

より正確な答えを得るには、fiddleを作成してください。

アップデート

#panel-var から -height を引く$(window).scrollTop必要がありますscroll_top1。

例えば：

var scroll_top1 = $(window).scrollTop() - $('#panel').height();

ただし、 #panel が表示されているかどうかも確認する必要があります;-)

Update2

わかりました、見てください！

//sticky top nav
$(document).ready(function(){
        // grab the initial top offset of the navigation
        var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

        // our function that decides weather the navigation bar should have "fixed" css position or not.
        var sticky_navigation = function(){

            var scrollHeight = $(window).scrollTop(),
                scrollHeightP = $(window).scrollTop() - $('#panel').height();
            var scroll_top1 = $('#panel:hidden') ? scrollHeight  : scrollHeightP; // our current vertical position from the top

            // if we've scrolled more than the navigation, change its position to fixed to stick to top,
            // otherwise change it back to relative
            if (scroll_top1 > sticky_navigation_offset_top ) {
                $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 })
            } else {
                $('#sticky_navigation').css({ 'position': 'relative' });
            }  

        };

        // run our function on load
        sticky_navigation();

        // and run it again every time you scroll
        $(window).scroll(function() {
             sticky_navigation();
        });

});
于 2012-09-14T23:29:59.877 に答える