Sticky.js 宽度：调整浏览器大小后 100% 导航不再 100%

Posted 2023-04-13

【中文标题】Sticky.js 宽度：调整浏览器大小后 100% 导航不再 100%

【英文标题】：Sticky.js width:100% nav no longer 100% after resize of browser

【发布时间】：2014-05-11 01:19:51

【问题描述】：

我已经实现了一个宽度：100% 的导航栏，它与本网站上的导航栏非常相似：(http://halfcreative.themes.bitfade.com/)。

我的导航栏将在导航到达页面顶部时变得粘滞，Anthony Garand 的sticky.js 插件非常成功地实现了这一点。所以没有问题。

但是，当导航设置为“粘性”时，我在调整浏览器大小时遇到​​问题，它似乎失去了宽度：100% 样式并且无法响应。当您没有通过向下滚动激活sticky.js时，它是响应式的。

我已经设置了一个 JSFiddle（下面的链接）。为什么会这样？

http://jsfiddle.net/shRzE/1/

我的一些 html 标记

<nav class="nav" id="sticky-navigation">

            <div class="navigation inner">
                <ul>
                    <li><a rel="competition" href="">Competition</a></li>
                    <li><a rel="worldbid">The Bid</a></li>
                    <li><a rel="logistics" href="">Logistics</a></li>
                    <li><a rel="workflow" href="">Workflow</a></li>
                    <li><a rel="lens" href="">Lens to Living Room</a></li>
                    <li><a rel="build" href="">The Build</a></li>
                </ul>
            </div>
        </nav>

注意：我发现如果您将“结果”方块尽可能大，您可以最好地看到问题。

向下滚动，直到一半区域为红色，一半区域为黑色，因此菜单垂直位于屏幕中间，然后调整“结果”框的大小以查看导航在 100% 时正常工作。

李>

继续滚动直到导航停留在窗口顶部。然后再次调整“结果”框的大小，发现它不再很好地调整大小。

注意：我也实现了 Bootstraps Affix 并且遇到了完全相同的问题。

【问题讨论】：

您能否提供有关您在哪个浏览器中查看此内容的信息？我已经检查了 Windows 上的 FF 和 Chrome，我无法复制您的问题。

【参考方案1】：

调用时尝试添加jquery选项：

  $("#topBar").sticky( 
    getWidthFrom: '.wrapper',
    responsiveWidth: true
     );

#topBar 是您的粘性项目，.wrapper 是全宽元素。

【讨论】：

不知道这是否解决了 OP 的问题，但它确实解决了我的问题。

【参考方案2】：

尝试添加

left: 0px;
right: 0px;

到你的位置固定元素，所以是这样的：

#element 
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;

似乎由于某种原因，position: fixed; 元素的宽度没有被浏览器注册，因此将左右位置定位到视口边缘意味着浏览器总是知道元素的宽度和然后可以正确地将您的内容居中。

【讨论】：

感谢这位百思不得其解的丹尼尔。