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

Question

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

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

感谢是否有更精通 CSS 的人能为我指明正确的方向。

Answer 1

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

您需要的电源是:

宽度:100%；
位置:固定；

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

z-index: -1

基本上将导航栏 z-index 设置为高，内容设置为 1、2(取决于您的设计)，页脚低于其他所有内容。

根据您的意图，您可能会使用一些 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>