1

我试图让这个模板有一个固定的导航栏：这里

我是 CSS 的初学者，很抱歉这个愚蠢的问题。当我尝试使 .masthead 具有位置：固定时，“关于联系人的主页”部分消失了。

提前致谢！

4

4 回答 4

2

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

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

然后，由于页眉未与页面顶部对齐，您需要一些 javascript 来使其粘在顶部：

<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>
于 2013-07-12T17:43:35.670 回答
2

问题：当你设置 position:fixed 时，默认情况下，宽度masthead变成了里面元素的大小。通常你可以声明width:100%它masthead会拉伸父 div 的整个宽度，但在这种情况下，在固定元素上设置百分比宽度会使其根据视口的宽度进行计算：有关更多详细信息，请参见此处： 百分比固定元素的宽度？

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

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

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

（我添加的边框只是为了外观，如果您愿意，可以将其删除。）

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

由于默认的边距样式 ( margin-bottom: 20px; margin-left: 0;)on .navs in bootstrap "Home About Contact" 部分最终看起来有点尴尬。我们通过将边距设置为更合适的东西来解决这个问题：margin: 14px 0;

快速说明：我在 chrome web 检查器中将所有这些样式作为内联应用，以便它们覆盖任何其他属性

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

于 2013-07-12T17:54:42.817 回答
0

这是一个导航栏，适用于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/

于 2013-07-12T17:39:35.497 回答
0

Look at the boostrap navbar docs

Here is an example of a fixed navbar using 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>
于 2013-07-12T17:33:31.377 回答