Partially sticky footer

Question

I've been trying to create a partially sticky footer. I've managed to make it work "almost" as intended. But I think I might have over complicated the issue and I'm having issues knowing what's going wrong.

My footer is broken into 2 parts. Part1 is always visible as a sticky footer, part2 only shows up when you scroll to the bottom of the document, or if you toggle it's visibility.

At the moment it is doing just that, but a little more.

How I'm making things happen is:

• On the scroll event I'm removing the display:fixed from the footer and the padding of the main div.
• On the click event I'm animating the bottom:value to toggle the footer.

The problems arise when the triggers overlap. So if you scroll to the bottom, part2 shows up, but you can still toggle the footer. When you scroll back up you'll see a jitter where all the css is trying to get back into place.

Basically, if you scroll up and down, it's all good (except a little space between footer and content, not too worried though). And if you're not at the bottom of the page and toggle the footer, all is good as well.

• How would you guys go about destroying that jitter?
• Any ideas on how to do the same with less code also appreciated, but not the main problem, I think xD

HTML

<div class="content">
    <div class="innerContent">
        <!-- ADD CONTENT HERE OR SET THE HEIGHT -->
    </div>
    <div class="footerContainer">
        <div class="footerShow"></div>
        <div class="footer"></div>
    </div>
</div>

CSS

.content {
    width:600px;
    margin:0 auto;
    background:#ccc;
}
.innerContent {
    background:rgba(255, 255, 255, 0.7);
}
.footerContainer {
    width:600px;
    position:fixed;
    background:blue;
}
.showFooterContainer {
    position:inherit;
    bottom:none;
}
.footerShow {
    width:600px;
    height:50px;
    background:rgba(255, 255, 0, 1);
}
.footer {
    width:600px;
    height:250px;
    background:orange;
}

jQUERY

  $('.content').css('padding-bottom', ($('.footerContainer').height() + 'px'));
  $('.footerContainer').css('bottom', ('-' + $('.footer').height() + 'px'));

  $(window).scroll(function() {
      var scrollH = $(window).scrollTop(),
          windowH = $(window).height(),
          documentH = $(document).height(),
          footerH = $('.footer').height(),
          footCont = $('.footerContainer'),
          footContH = footCont.height(),
          footShowH = $('.footerShow').height(),
          desiredH = footShowH - footContH + 'px';

    if (footCont.css('bottom') == '0px') {
      footCont.animate({
        bottom: desiredH},
        600
      );
    }
    if ( scrollH < (documentH - windowH - footerH) ) {
        footCont.removeClass('showFooterContainer');
        $('.content').css('padding-bottom', footContH + 'px');
    } else {
        footCont.addClass('showFooterContainer');
        $('.content').css('padding-bottom', '0px');
    }
  });

  $('.footerShow').click(function(){
    var footCont = $('.footerContainer'),
        footContH = footCont.height(),
        footShowH = $('.footerShow').height(),
        desiredH = footShowH - footContH + 'px';

    if (footCont.css('bottom') == desiredH) {
      footCont.animate({
        bottom:0},
        1200
      );
    }
    if (footCont.css('bottom') == '0px') {
      footCont.animate({
        bottom: desiredH},
        1200
      );
    }
  });

JSBIN

PS - I know I shouldn't declare variables all over the place, but I'm still struggling with scope.

Answer 1

I do something like use a boolean variable to keep track of the state it is in, disabling the click event if the page is scrolled to the bottom section. You could also do this by using the variables change, but this way is simple, just requiring and added if statement and toggling a boolean

var isAtBottom = false; // At top
...
    if (scrollH < (documentH - windowH - footerH)) {
        isAtBottom = true;
        ...
    else {
        isAtBottom = false;
        ...
...
$('.footerShow').click(function () {
    if (!isAtBottom) {
       ... Your code ...

Demo