jQuery - 如何在两种情况下使粘性导航'stick'？默认情况下，顶部面板 div 展开

Question

我有一个"粘性导航"，当用户向下滚动过去时，它会"粘"到顶部（函数将其位置更改为：fixed，top：0）。我在页面顶部还有一个"展开"登录区域。第一个问题是当我展开页面顶部的登录区域时，导航栏"粘住"的点发生了变化。现在，当面板打开时，我让它粘住，但是当它关闭时，它会粘在错误的点（似乎粘在 #panel 的额外高度点）。见小提琴

我如何使#sticky_navigation粘在顶部：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();
    });
});

Answer 1

尝试这样的事情：

$(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();
    });
});​

要获得更准确的答案，请创建一个小提琴。

更新

您需要从$(window).scrollTop -var scroll_top1中减去#panel高度。

例如：

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

但是，您还需要检查 #panel 是否可见;-）

更新2

知道了

，看看就知道了！

//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();
        });
});