CODEWITHSUNDEEP
htmlcss
blue
blue

Reputation: 7375

CSS/html - make footer ONLY visible after scroll? stick to bottom just below visible page area?

Ok, I have followed this link exactly and a trying to achieve a slightly altered effect - https://css-tricks.com/snippets/css/sticky-footer/

I have gotten my footer to stick to the bottom of my page with this code 

* {
  margin: 0;
}
html, body {
  height: 100%;
}

.footer{

  background-color: white;
  opacity: 0.8;
  text-align: center;
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  /* .push must be the same height as footer */
  height: 142px; 
}

.wrapper {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  /*
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  */
  overflow: scroll;
  z-index: -1;
  height: 100%;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>

however I need my footer to stick to the bottom of the page BELOW the visible page area, similar to how you have to scroll here on stack to see the black footer bar at the bottom. I don't want the footer to be visible if you are scrolled all the way to the top- even if there is only a header, the user should have to scroll to see the footer stuck to the bottom.

I don't know how to do this as I already set the height of my wrapper to 100% - it should be taking up the whole page and push the footer off in theory.

How can I stick my footer to the bottom of page PAST the part of the page that is initially visible (i.e. not visible until scrolled down to)?

Upvotes: 3

Views: 5544

Answers (3)

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

You can use jquery scroll for that purpose. I have just added some dummy text to enable scroll on page.

JavaScript : 

$(window).on("load", function() {
  var position = $('.wrapper').scrollTop();

  $('.wrapper').scroll(function() {
    var scroll = $('.wrapper').scrollTop();
    if (scroll > position) {
      $('.footer').removeClass('hide');
    } else if (scroll == 0) {
      $('.footer').addClass('hide');
    }
    position = scroll;
  });
});

Added CSS : 

.hide {
  display: none;
}

jsfiddle : http://jsfiddle.net/nikdtu/g3svmoqq/

Upvotes: 1

philraj
philraj

Reputation: 841

If really all you need is a footer of fixed height that sticks right below the initial bottom edge of the window (until enough content is added to push it further down), this seems to do the trick.

All you need is to set the min-height of the wrapper to 100%, plus the height of your footer in this case, to extend the background behind it. calc() can determine the total for you.

If you don't need the background to do that it gets even simpler, and you can remove all the :after and negative margin business, and just set the min-height to 100%.

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus.</p>").insertAfter("#add");
});
* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  min-height: calc(100% + 142px);
  margin-bottom: -142px;
}

.wrapper:after {
  display: block;
  content: "";
  height: 142px;
}

.footer {
  background-color: white;
  opacity: 0.5;
  height: 142px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
  <p><button id="add">Add Content</button></p>
</div>
<div class="footer">Footer</div>

Upvotes: 1

Arpit Kumar
Arpit Kumar

Reputation: 2249

First you can use jQuery for page scroll detaction

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            $(".footer").addClass("show-footer");
        } else {
            $(".footer").removeClass("show-footer");
        }
    });
});

now you need a css class "show-footer" for your footer div

.show-footer {
    visibility: visible;
    position: fixed;
    bottom: 0;
}
.footer {
    visibility: hidden;
}

Upvotes: 0

Related Questions