html - 如何相对于固定的导航栏和页脚移动主要内容

有关上下文，请参见Pitchfork网站上的此页面：http://pitchfork.com/best/

主要内容滚动，而导航和页脚保持固定。
我尝试过无数次地重新创建它，但是我很困惑。

如果有更多的CSS熟练者能指出我正确的方向，我将不胜感激。

最佳答案

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed

您需要的电源是：

width: 100%;position: fixed;

对于页脚，我想它正在使用

z-index: -1

基本上将navbar的z-index设置为sth高，将content设置为1,2（取决于您的设计），并将footer设置为最低。

根据您的意图，您可能会使用一些javascript

var elementPosition = $('#navbar').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
            $('#navbar').css('position','fixed').css('z-index','9').css('width','100%').css('top','0');
        } else {
            $('#navbar').css('position','relative').css('top','0');
        }
});

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

#main {
position: relative;
    z-index: 10;
    background: #f7f7f7;
      margin-bottom: 20rem;}

<div id="main">

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</div>
<div id="footer">
<h3>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</h3>
</div>

关于html - 如何相对于固定的导航栏和页脚移动主要内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45358777/