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

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代码附在我的小提琴中.谢谢!

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>