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

I have the following CSS code:

我有以下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;
}

And thanks to it I have the footer constantly visible on my webpage when I scroll up/down. What I want to achieve is to have another footer with different text visible on the very bottom of the page, so when user scrolls down and enters #section3, the normal footer will disappear and he will see only the new footer. I thought I could just use the CSS attribute:

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

#section3 #footer{
    display:none;
}

but seems like it does not solve my case. The full html and css code is attached in my fiddle. Thanks!

但似乎它没有解决我的情况。完整的html和css代码附在我的小提琴中。谢谢!

5 个解决方案

#1

Just add z-index to #section3 and it will work :)

只需将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>

#2

Give #betterFooter an higher z-index than the one of #footer. And remove the trasparency from it too.

给#betterFooter一个比#footer更高的z-index。并从中删除trasparency。

Running demo on jsFiddle

在jsFiddle上运行demo

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;
}

<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>

#3

How should the footer disappear? If the footer which should disappear has a smaller z-index than the section 3 it would move under it. But I think you want to to "toggle" it, isn't it?

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

#4

You can use a z-index as someone suggested. If you really want to detect the bottom of the page on scroll (if you want to use transparent footers for example), you need to add some jQuery.

您可以像建议的那样使用z-index。如果你真的想在滚动时检测页面底部(例如,如果你想使用透明页脚),你需要添加一些jQuery。

Example :

$(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>

#5

You can achieve this by making the z-index for #betterFooter higher than the z-index of #footer. Think of z-index as a stack of papers. An element with a higher z-index means it is closer to the top of the stack than one with a lower z-index.

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

So your css could look something like this:

所以你的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;
}

We made the z-index: 10 because the z-index for #footer is 9.

我们创建了z-index:10,因为#footer的z-index是9。

Check out the fiddle here http://jsfiddle.net/hb7y019n/

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