Javascript jQuery-如何进行粘性导航'；斗杆'；在两种情况下？默认情况下，且顶部面板div已展开

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

如何使#面板打开和关闭/默认时#sticky#u导航在两种情况下都保持在顶部：0

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

});

更新： 现在，只有当面板打开时，我才能让it工作。如果关闭，则“粘滞”导航不会启动

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

});

---

试着这样做：

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

});​

要获得更准确的答案，请创建一个

更新

您需要从

$（窗口）中减去
#面板的高度。scrollTop
-var
scroll\u top1

例如：

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

但是，您还需要检查#面板是否可见；-）

更新2

明白了，就这样

嗯，看来没什么用。。非常感谢你的努力。嗯，好吧，我误解了你的问题！使网站在线并在此处共享您的链接。。。这样我就可以玩一玩了！另外-如果单击“登录”，为什么登录面板会关闭？这不好，因为你告诉他登录面板会关闭！在

//折叠面板下执行以下操作：

$（“#面板”）。单击（function（）{$（“div#面板”）。slideUp（“swing”）；}它仍然没有工作。对你有用吗？查看我的更新我已经切换到另一个使用路径点的jQuery插件，但如果有人能解决这个难题，那将是非常有趣的
//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();
        });

});