javascript - Jquery slideToggle 从屏幕顶部滑动一个 div - 但屏幕顶部在滚动期间发生变化并且 div 不可见

Question

我正在使用 Jquery slideToggle 从页面顶部滑动一个 div。效果正在运行，可以在这里看到(请将鼠标悬停在成员(member)登录导航按钮上以查看效果，蓝色 div 将向下滑动):

我的问题是，当页面向下滚动时，div 仍然从文档的最顶部向下滑动，而不是视口(viewport)窗口的顶部，因此它是不可见的。如果您向下滚动页面，并将鼠标悬停在右侧的成员(member)登录按钮上，您将看到问题(主导航向下移动，但隐藏的蓝色 div 不再可见)。

我想知道如何重新计算顶部的位置，并告诉 slidetoggle 从那里向下滑动蓝色。

这可能会有帮助，我用来将常规导航附加到页面顶部的代码如下:

$(function() {

    $('#nav-wrapper').height($("#nav").height());
    $('#nav').affix({
    offset: { top: $('#nav').offset().top }
});
});

Answer 1

看起来你必须稍微改变一下你的脚本，但我要解决这个问题的方法是将你所有的导航元素(登录表单和导航栏)包装在一个 div 中并给那个 div

position: fixed;

这样一来，您的导航将固定在窗口的顶部，而无论滚动如何，登录表单都将保留在屏幕的顶部。

像这样:

HTML:

<div id="nav-section-wrapper">
    <div id="login">...</div>
    <div id="nav-wrapper>...</div>
</div>

CSS:

#nav-section-wrapper {
    position: fixed;
    top: 0;
    z-index: 1;
}