3

我已经实现了一个宽度：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>

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

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

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

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

4

2 回答 2

3

调用时尝试添加 jquery 选项：

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

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

于 2015-04-01T15:15:10.770 回答
1

尝试添加

left: 0px;
right: 0px;

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

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

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

于 2014-04-08T14:40:09.713 回答