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!

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!

• javascript
• jquery
• html
• css

5 Answers 5

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

http://jsfiddle/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>

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>

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?

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

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