How to make footer disappear when scrolling to the specific div on the page?

I have the following CSS code:

#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 #footer{
    display:none;
}

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

Answers:

Answer

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

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

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

Running demo on jsFiddle

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>

Answer

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?

Answer

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.

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>

Answer

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.

So your css could look something like this:

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.