Question

我正在尝试使此模板具有固定的导航栏：here

我是CSS的初学者，很抱歉这个愚蠢的问题。当我尝试使.masthead有位置：固定时，“Home About Contact”部分消失。

提前致谢！

Answer 1

问题：当您设置position：fixed时，masthead的宽度默认为内部元素的大小。通常你可以在width:100%上声明masthead，因此它会拉伸父div的整个宽度，但在这种情况下，在固定元素上设置百分比宽度会使它根据宽度计算 viewport ：有关详细信息，请参阅此处： Percentage width for fixed elements?

由于其余内容的max-width为700px，我们可以将masthead的宽度设置为700px，但问题是缩小视口时，页面的其余部分会收缩，但masthead不会。在标头上设置max-width不起作用，因为其原始宽度小于700px。

.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}

请注意，我们将背景设置为白色，否则条形图默认具有透明背景，下方的元素将相交 - 非常难看。我们将top属性设置为0，因此它现在已附加到页面顶部，并且在滚动时不会留下间隙。

（我添加的边框仅用于外观，如果您愿意，可以删除它。）

由于我们将masthead设置为fixed定位，现在它已从页面流中删除，因此页面中的其他所有操作都与masthead不同。这会导致一个问题：页面中的所有内容都会向上移动，并且顶部的<hr />之一会被隐藏。要解决此问题，我们会在margin-top: 50px;顶部添加<hr />，并且所有内容都会向下移动。

由于默认的边距样式（margin-bottom: 20px; margin-left: 0;)在引导程序中.nav，“主页关于联系人”部分最终看起来有点尴尬。我们通过将边距设置为更合适的方式来解决此问题： margin: 14px 0;

快速注释：我在Chrome网页检查器中将所有这些样式应用为内联，以便它们覆盖任何其他属性

编辑：实际上，如果您只是使用网络检查器从文档中删除HR，它也能很好地工作

Answer 2

首先，您需要在标题中添加一些CSS，以便它可以用作固定标题。它需要背景颜色和给定的宽度：

.masthead {
    width: 700px;
    background: white;
}

然后，由于标题未与页面顶部对齐，因此您需要一些javascript才能将 stick 添加到顶部：

<script>
$(document).ready(function() {

    var div = $('.masthead');
    var start = $(div).offset().top;
        
    $.event.add(window, "scroll", function() {
         var p = $(window).scrollTop();
         $(div).css('position',((p)>start) ? 'fixed' : 'static');
         $(div).css('top',((p)>start) ? '0px' : '');
    });
});
</script>

Answer 3

查看boostrap navbar docs

以下是使用bootstrap的固定导航栏的示例：

       <div class="navbar navbar-fixed-top" style="position: absolute;">
          <div class="navbar-inner">
            <div class="container" style="width: auto; padding: 0 20px;">
              <a class="brand" href="#">Title</a>
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div>
          </div>
        </div>

Answer 4

这是一个适用于position: fixed的导航栏：

<div class='container'>
    <div class='navbar'>
        <div align='right'> <a class='menu1 menu-item'>Home</a>
 <a class='menu2 menu-item'>About</a>
 <a class='menu3 menu-item'>Contact</a>

        </div>
    </div>
</div>

http://jsfiddle.net/H9mMk/3/

Answer 5

将“固定顶部”添加到课程中即可完成工作：

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
     <!-- Navbar content -->
    </nav>

来源：https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

如何在Bootstrap中修复导航栏？

5 个答案: