html - 如何使流体宽度的网页具有固定(固定)标题？

Question

我正在尝试使该网站上的页眉/菜单栏静态(固定)，以便它始终出现在屏幕顶部，并且一个特别长的网站在其“后面”滚动。我以前在固定宽度的网站上完成过这个，但是这个网站是流动宽度的，我还不能在不破坏标题的情况下完成这个。

有人可能会告诉我我需要在 CSS 中编辑什么地方/什么吗？我相信我需要添加一个 position:fixed;某处的元素，也许在本节中，但它似乎并没有像在固定宽度的网站上那样以同样的方式实现我的目标。

.art-header
{
   margin:0 auto;
   background-repeat: no-repeat;
   height: 170px;
   position:relative;
   background-image: url('images/header.jpg');
   background-position: center top;
}

.custom-responsive .art-header
{
   background-image: url('images/header.jpg');
   background-position: center top;
}

.default-responsive .art-header,
.default-responsive #art-header-bg
{
   background-image: url('images/header.jpg');
   background-position: center center;
   background-size: cover;
}

.art-header-inner{
   position: relative;
   min-width: 840px;
   max-width: 1920px;
   width: 50%;
   z-index: auto !important;
   margin: 0 auto;
}

Answer 1

试试这个，将你的 .art-header 和 .art-nav 合并到一个 div 中，然后像这样 fixed 类

<div class="fixed">
    //div .art-header & nav .art-nav here
</div>

然后添加固定的css

.fixed {
    position: fixed;
    z-index: 100;
}

并为 .art-sheet 留出一些余量

margin-top: 241px; /*the height of the fixed div*/

这是 JSFIDDLE