頁腳一旦用戶滾動向上滑動到頁面底部 - 閃爍

我有以下代碼：頁腳一旦用戶滾動向上滑動到頁面底部 - 閃爍

var footer = $('.footer'), 
    extra = 0; 

// footer.css({ opacity: '0', display: 'block' }); 


$(window).scroll(function() { 

    var scrolledLength = ($(window).height() + extra) + $(window).scrollTop(), 
     documentHeight = $(document).height(); 



    console.log('Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight) 


    if(scrolledLength >= documentHeight) { 

     footer 
      .addClass('bottom') 
      // .slideUp(); 
      .stop().animate({ bottom: '0', opacity: '1' }, 300); 

    } 
    else if (scrolledLength <= documentHeight && footer.hasClass('bottom')) { 
     footer 
      .removeClass('bottom') 
      // .slideDown(); 
      .stop().animate({ bottom: '-100', opacity: '0' }, 300); 

    } 
});

我的目標是到頁腳一旦用戶滾動顯示在頁面的底部。如果用戶再次向上滾動，我希望頁腳再次滑下。

現在我正在檢查scrolledLength對documentHeight。然而，問題似乎是，一旦我們達到最低點，documentHeight就會改變，因爲頁腳出現並擴展了文檔。

我的代碼確實有效，頁腳不會再消失或任何東西，但它閃爍很多（然後最終平靜下來），因爲它正在重新計算。我怎麼解決這個問題？我的代碼中是否有錯誤？

來源

2017-04-17 George Welder

店如果頁腳是可見的一個布爾值，如果是，計算高度documenth高度 - footerHeight？ –

您已經添加類到頁腳，動畫可以用CSS來處理：

.footer { 
    position: fixed; 
    width: 100%; 
    height: 100px; 
    bottom: -100px; 
    transition: all 200ms ease-out; 
} 

.footer.bottom { 
    bottom: 0; 
}

更新：JSFiddle with working slide up footer。

顯然，我在猜測腳架應該如何設計，因爲您還沒有提供CSS - 當添加類.bottom時，此代碼將簡單地爲頁腳設置動畫。

來源

2017-04-17 21:41:03 Toby

謝謝。它不會彈出，但它似乎只是停留在底部並向下移動，但不會像現在這樣出現在「無處」的位置。向後移動它看起來不錯，但是消失了！ –

如果您可以在JSFiddle或Codepen上發佈一個鏈接給您的代碼，我可以進行相關更改。 – Toby

非常感謝你。我以某種方式不能讓它在這個jsfiddle中工作，但這是我的代碼到目前爲止：https://jsfiddle.net/u75d9pvc/1/我會再看看，並嘗試讓它在我的機器上工作，但從來沒有使用jsfiddle之前，不知道發生了什麼 –

嘗試使用CSS過渡，而不是：

var footer = $('.footer'), 
 
    extra = 0; 
 

 
// footer.css({ opacity: '0', display: 'block' }); 
 

 

 
$(window).scroll(function() { 
 

 
    var scrolledLength = ($(window).height() + extra) + $(window).scrollTop(), 
 
     documentHeight = $(document).height(); 
 

 

 
    if(scrolledLength >= documentHeight) { 
 

 
     footer 
 
      .addClass('open') 
 
      
 
      
 

 
    } 
 
    else if (scrolledLength <= documentHeight && footer.hasClass('open')) { 
 
     footer 
 
      .removeClass('open') 
 
      
 

 
    } 
 
});

.container{ 
 
    position:relative; 
 
    height: 200vh; 
 
    width:100%; 
 
    background-color:red; 
 
    overflow:hidden; 
 
} 
 

 
.footer{ 
 
    height: 100px; 
 
    width:100%; 
 
    position: absolute; 
 
    left:0px; 
 
    bottom:-100px; 
 
    background-color: black; 
 
    transition: 1s; 
 
    
 
} 
 

 
.open{ 
 
    bottom:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="footer"></div> 
 
    
 
</div>

來源

2017-04-17 21:45:35 vlk

頁腳一旦用戶滾動向上滑動到頁面底部 - 閃爍

回答

相關問題