Частично липкий нижний колонтитул

Question

Я пытался создать частично липкий нижний колонтитул. Мне удалось заставить его работать «почти» по назначению. Но я думаю, что, возможно, я усложнил проблему, и у меня проблемы с пониманием того, что происходит не так.

Мой нижний колонтитул разбит на 2 части. Часть 1 всегда отображается как липкий нижний колонтитул, part2 отображается только при прокрутке до нижней части документа или при переключении ее видимости.

На данный момент это делается именно это, но немного больше.

Как я делаю вещи случиться:

• На событии прокрутки я удаление display:fixed из футера и заполнения основных дел.
• В событии click я анимация bottom:value для переключения нижнего колонтитула.

Проблемы возникают, когда триггеры перекрываются. Поэтому, если вы перейдете на нижнюю часть, появится часть 2, но вы можете переключать нижний колонтитул. Когда вы прокрутите резервную копию, вы увидите дрожание, где все css пытаются вернуться на место.

В принципе, если вы прокручиваете вверх и вниз, все хорошо (за исключением небольшого пространства между нижним колонтитулом и контентом, но не слишком беспокоиться). И если вы не находитесь внизу страницы и переключаете нижний колонтитул, все хорошо.

• Как вы, ребята, собираетесь уничтожить этот джиттер?
• Любые идеи о том, как сделать то же самое с меньшим количеством кода также оценили, но не главная проблема, я думаю, 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 - Я знаю, что я не должен объявлять переменные повсюду, но я до сих пор борюсь с размахом.

Answer 1

Я делаю что-то вроде использования логической переменной, чтобы отслеживать состояние, в котором она находится, отключение события click, если страница прокручивается в нижнюю часть. Вы также можете сделать это с помощью переменных изменяются, но этот путь просто, требуя и добавил if заявление и переключая булево

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

Demo