Question

我有以下CSS代码：

#section1{

    background-color: red;
    height: 600px;
}
#section2{

    background-color: blue;
    height: 700px;
}
#section3{

    background-color: orange;
    height: 300px;
    position:relative;
}

#footer{
   bottom:0px;
}

#footer {  
   position:fixed;
   display:block;
   width: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index:9;
   text-align:center;
   color: #f2f2f2;
   padding: 4px 0 4px 0;
}

#betterFooter {  
   position:absolute;
   bottom: 0px;
   display:block;
   width: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index:9;
   text-align:center;
   color: #f2f2f2;
   padding: 4px 0 4px 0;
}

多亏了它，当我向上/向下滚动时，我的网页上始终显示页脚。我想要实现的是在页面的最底部显示另一个具有不同文本的页脚，因此当用户向下滚动并进入#section3时，正常的页脚将消失，他将只看到新的页脚。我以为我可以使用CSS属性：

#section3 #footer{
    display:none;
}

但似乎并没有解决我的情况。完整的html和css代码附在我的fiddle中。谢谢！

Answer 1

只需将z-index添加到＃section3就可以了：）

http://jsfiddle.net/pxyr19ob/1/

* {
  margin: 0;
}
#section1 {
  background-color: red;
  height: 600px;
}
#section2 {
  background-color: blue;
  height: 700px;
}
#section3 {
  background-color: orange;
  height: 300px;
  position: relative;
  z-index: 10;
}
#footer {
  bottom: 0px;
}
#footer {
  position: fixed;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  text-align: center;
  color: #f2f2f2;
  padding: 4px 0 4px 0;
}
#betterFooter {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  text-align: center;
  color: #f2f2f2;
  padding: 4px 0 4px 0;
}

<div id="section1">

</div>

<div id="section2">

</div>
<div id="section3">
  <div id="betterFooter">
    I would like to see this text on the very bottom of the webpage
  </div>
</div>

<div id="footer">
  I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>

Answer 2

给#betterFooter 更高 z-index而不是#footer。并从中删除trasparency。

Running demo on jsFiddle

＆＃13;

body {
    margin: 0;    
}

#section1 {
    background-color: red;
    height: 600px;
}
#section2 {
    background-color: blue;
    height: 700px;
}
#section3 {
    background-color: orange;
    height: 300px;
    position:relative;
}
#footer {
    bottom:0px;
}
#footer {
    position:fixed;
    display:block;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index:9;
    text-align:center;
    color: #f2f2f2;
    padding: 4px 0 4px 0;
}
#betterFooter {
    position:absolute;
    bottom: 0px;
    display:block;
    width: 100%;
    background: rgba(0, 0, 0, 1);
    z-index:10;
    text-align:center;
    color: #f2f2f2;
    padding: 4px 0 4px 0;
}

＆＃13;

<div id="section1"></div>
<div id="section2"></div>
<div id="section3">
    <div id="betterFooter">I would like to see this text on the very bottom of the webpage</div>
</div>
<div id="footer">I would like to see this text anywhere on the page but not when I scroll to the very bottom</div>

＆＃13;

Answer 3

页脚应如何消失？如果应该消失的页脚具有比第3部分小的z指数，它将在其下移动。但我认为你想“切换”它，不是吗？

Answer 4

您可以按照建议使用z-index。如果你真的想在滚动时检测页面的底部（例如，如果你想使用透明的页脚），你需要添加一些jQuery。

示例：

$(document).ready(function() {
  $(window).on('scroll', function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      $('#footer').hide();
    } else {
      $('#footer').show();
    }

  });
});

#section1 {
  background-color: red;
  height: 600px;
}
#section2 {
  background-color: blue;
  height: 700px;
}
#section3 {
  background-color: orange;
  height: 300px;
  position: relative;
}
#footer {
  bottom: 0px;
}
#footer {
  position: fixed;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  text-align: center;
  color: #f2f2f2;
  padding: 4px 0 4px 0;
}
#betterFooter {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  text-align: center;
  color: #f2f2f2;
  padding: 4px 0 4px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1">

</div>

<div id="section2">

</div>
<div id="section3">
  <div id="betterFooter">
    I would like to see this text on the very bottom of the webpage
  </div>
</div>

<div id="footer">
  I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>

Answer 5

您可以通过z-index #betterFooter高于z-index #footer来实现此目的。将z-index视为一堆文件。具有较高z-index的元素意味着它比具有较低z-index的元素更接近堆栈的顶部。

所以你的css看起来像这样：

#betterFooter {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    text-align: center;
    color: #f2f2f2;
    padding: 4px 0 4px 0;
}

我们制作了z-index: 10，因为z-index的{{1}}为9。

查看这里的小提琴http://jsfiddle.net/hb7y019n/

当滚动到页面上的特定div时，如何使页脚消失？

5 个答案: