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

Question

请参阅Pitchfork网站上的此页面以了解上下文：http://pitchfork.com/best/

主要内容滚动，而导航和页脚保持不变。我试过无数次重现它，但我被难住了。

如果有更熟练的CSS技术的人能给我指出正确的方向，我将不胜感激。

Answer 1

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

您需要的电源有：

width: 100%; position: fixed;

对于页脚，我猜它使用的是

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>

​

Answer 2

编辑:我实际构建了原型，看一下代码片段！

Header可能是这样的：

header {
    position:fixed;
    width:100%;
    top:0;
    left:0;
}

还有页脚..。我会做的是：

footer {
    width:100vh;
    display:flex;
    align-items: flex-end;
    z-index:-1;
}

然后在页脚中会有一个容器，里面有实际的内容，对齐到底部。

至于页脚显示，您可以在内容区域中添加下边距，或者只添加一个具有一定高度的透明div，以便滚动和显示内容结束处的页脚。

​

* {
  margin:0;
  padding:0;
  
}

header {
  width: 100%;
  background: #1a1a1a;
  position:fixed;
  top:0;
  left:0;
}

footer {
  height:100vh;
  background: purple;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  width:100%;
  bottom:0;
  left:0;
  z-index:-1;
}

.footer-content {
  
}

.content {
  background: yellow;
  font-size: 40px;
}

.empty-div {
  background:transparent;
  width: 100%;
  height: 300px;
}

<header>
  asdasdasd <br>
  asd
</header>

<div class="content">
  <p>sdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf as</p>
 
</div>
 <div class="empty-div"></div>
<footer>
  <div class="footer-content">
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
  </div>
</footer>

​

Answer 3

这应该会给你一个关于如何去做的想法。

​

.nav {
  width: 100%;
  height: 50px;
  background: #1a1a1a;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
  position: fixed;
  z-index: 999999;
}
.content {
  width: 100%;
  height: 1000px;
  background: #271021;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
  margin-bottom: 200px;
}
.footer {
  width: 100%;
  height: 400px;
  background: #1b0b17;
  bottom: 0;
  position: fixed;
  z-index: -1;
}

<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

​