使用位置：固定导航无法正常工作

我创建了一个JSFiddle来显示我的网页结构HTML和CSS。使用位置：固定导航无法正常工作

我一直在努力，而读者的其余部分消失，页面滚动的休息建立滚动导航粘在页面的顶部，当其中一个网页，但是当我添加的位置是：固定在.nav类上它会停止跨越整个页面宽度的背景颜色，并覆盖我的文本对齐：中心。这里是我的CSS的其余部分：

.header { 
    text-align: center; 
} 

.nav { 
    position: fixed; 
} 

.nav ul { 
    padding: 0; 
    margin: 0;e 
    list-style: none; 
    /* display: block; */ 
    background-color: #eee; 
} 

.nav li { 
    display: inline-block; 
    padding: 0 10px; 
}

我遇到的如何解决这一问题的几个例子，但发现很难了解如何将其应用到我的问题。

你们认为什么？

来源

2014-03-02 calabi

我张贴的答案，但我可能误解了你的问题。你是否想让导航栏位于标题下方，让你的h1向上滚动，然后让导航栏粘贴到屏幕的顶部？ – thesublimeobject

这将是非常酷的，我推测这是不可能的，因为我的导航定位的方式？有没有简单的方法来做到这一点？ – calabi

不是一个简单的方法，但你可以用一点点的javascript来完成。如果你有兴趣，我也许可以开展一些工作。 – thesublimeobject

绝对或固定定位元素的自动计算宽度按“缩小到适合”计算，这意味着它们只与其内容所需的宽度相同。

因此给您的导航明确的宽度，或使用left:0; right:0从两侧“定位”。

（和你的text-align:center当然是不是“重写”，只是没有可见效果 - 因为元素只有一样宽，需要的内容，再有是没有更多的“中心“...）

来源

2014-03-02 00:59:33 CBroe

这是一个非常好的解释，我只是设置了这些位置，它完美的作品。非常感谢你。 – calabi

没有得到非常详细的，here is a codepen for you。您需要将固定位置和背景添加到父元素.header，而不是子元素。

下面是其他活动的一些可能的JS：

jQuery(document).ready(function($) { 
    var s = $("nav"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      s.addClass("stick"); 
      $('#rewrap').addClass("bump"); 
     } else { 
      s.removeClass("stick"); 
      $('#rewrap').removeClass("bump"); 
     } 
    }); 
});

来源

2014-03-02 01:00:39 thesublimeobject

谢谢你的代码示例，真的很有帮助。 – calabi

我在javascript中遇到了一个奇怪的错误！我大部分工作与我的变量，但交换了控制台消息的CSS，所以我可以测试。但我一直得到：[Error] TypeError：'null'不是控制台中的对象（评估'pos.top'）。这铃响吗？ – calabi

这是我一年前做过的一个网站，给我几分钟，我会看看我能否给你一个答案。 – thesublimeobject

使用位置：固定导航无法正常工作

回答

相关问题