頁腳部分發粘

Question

我一直在嘗試創建一個部分發粘的頁腳。 我設法使它“按預期”工作。 但是我想我可能已經使問題復雜化了，並且在知道發生了什么問題時遇到了問題。

我的頁腳分為兩部分。 第1部分始終顯示為粘性頁腳，第2部分僅在滾動到文檔底部或切換可見性時顯示。

目前，它只是這樣做，還有更多。

我如何使事情發生：

• 在滾動事件中，我從display:fixed頁腳和主div的填充中刪除了display:fixed 。
• 在click事件中，我正在對bottom:value進行動畫處理以切換頁腳。

當觸發器重疊時會出現問題。 因此，如果滾動到底部，則會顯示part2，但仍可以切換頁腳。 當您向上滾動時，您會看到一個抖動，所有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事件。 您也可以通過使用change變量來做到這一點，但是這種方式很簡單，只需要添加if語句並切換一個布爾值即可。

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

演示