在响应式网站中使用新偏移重置Bootstrap Affix

Question

我正在使用以下网页结构的网站上工作：

我正在使用Affix插件，以便当用户滚过标题时，导航会固定在页面顶部，如下所示：

网站具有响应能力，当它位于移动视口中时，标题会被display: none完全隐藏。问题是我似乎无法使用新的偏移量来“重置”Affix，现在它将为0，因为导航始终位于移动视口中页面的顶部。

我尝试了以下内容：

$(window).resize(function () {
    $("nav").affix({
        offset: $("nav").position()
    });
});

但这似乎没有做任何事情。当我向下调整到移动视口时，导航不会固定，直到我向下滚动页面的数量等于标题的大小（现在已完全隐藏display: none）。

我还尝试在重新启用之前禁用Affix插件：

$(window).resize(function () {
    $(window).off('.affix');

    $("nav").affix({
        offset: $("nav").position()
    });
});

但是当我调整大小时，Affix插件被禁用但似乎没有重新初始化，所以即使我只调整了少量（不是一直到移动视口，所以标题仍然可见） ，当我滚过标题时，导航不会固定。

我也试过用函数提供偏移量：

function getOffset() {
    return $("nav").position();
};

$(document).ready(function () {
    $("nav").affix({
        offset: getOffset()
    });
});

但是当我调整到移动视口时，偏移值似乎没有更新;导航不会固定，直到向下滚动页面的数量等于现在隐藏的标题。

有什么想法吗？

Answer 1

如果在移动视口中你只是使用position：fixed;它会对你的设计有效吗？顶部：0;左：0;宽度：100％;对于nav div，然后给页面内容div顶部一些填充，以便清除导航？