JQuery幻灯片切换到从屏幕顶部滑动div-但是在滚动和div期间屏幕顶部的变化是不可见的

Question

我使用jqueryslidetoggle从页面顶部滑动一个div。效果正在发挥作用，可以在此处看到（请将鼠标悬停在会员登录导航按钮上方以查看效果，蓝色div将向下滑动）：

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

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

这可能是有帮助的，我使用的代码将常规导航粘贴到页面顶部如下：

$(function() {

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

Answer 1

看起来您需要稍微更改一下脚本，但我要做的是将所有导航元素（登录表单和导航栏）包装在一个div中，并给出该div

position: fixed;

这样，您的导航将固定在窗口顶部，登录表单将保持在屏幕顶部，无论滚动。

这样地：

超文本标记语言：

<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;
}