Question

我已经实现了一个宽度：100％导航栏，它非常类似于此站点上的导航栏：（http://halfcreative.themes.bitfade.com/）。

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

然而，当导航器变得“粘滞”时我调整浏览器大小时出现问题似乎失去了它的宽度：100％风格并且无法响应。当你没有通过向下滚动激活sticky.js时它会响应。

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

我的一些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并且遇到了完全相同的问题。

Answer 1

尝试在调用时添加jquery选项：

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

将#topBar作为粘性项目，将.wrapper作为全宽度元素。

Answer 2

尝试添加

left: 0px;
right: 0px;

到你的位置固定元素，如下所示：

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

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

Sticky.js宽度：在调整浏览器大小后，100％导航不再是100％

2 个答案: