浮動頁腳僅在用戶向下滾動 200 像素后出現

Question

我正在構建一個需要頁腳的站點，該頁腳將始終浮動在瀏覽器 window 的底部。

但是，這只會在用戶向下滾動 200 像素后出現。 然后它應該就地滾動（就好像頁腳附加到 200 像素外的內容，但自身附加到瀏覽器窗口）。

一旦用戶向上滾動，就需要再次隱藏它。

如何才能做到這一點？

Answer 1

也許這段代碼可以幫助你：

$(window).scroll(function() {
    if ($(this).scrollTop() < 200) {
        $("#footer").hide();
    }
    else {
        $("#footer").show();
    }
});

對於 CSS 添加

#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:100px;
    width:100%;
    display:none;
}

像這樣的東西：

$(window).scroll(function() {
  if ($(this).scrollTop() < 200) {
    $("footer").slideUp();
      }
  else {
    $("footer").slideDown();
      }
});

Answer 2

我認為http://jsfiddle.net/KEjfe/4/是你想要的，從我在你的問題中收集到的。

但

我想讓你知道小提琴是一個粗略的例子，我不得不一起破解，因為它在小提琴中。 但想法就在那里，那就是你制作 2 個相同的頁腳。 一個在固定的 position 中（在小提琴中它是絕對的），一個在絕對的 position 中（在小提琴中它是相對的）。 然后你可以在我的小提琴中使用相同類型的if語句，一旦你從頂部滾動超過 200px，刪除絕對定位並顯示固定，反之亦然，當你低於 200px 時。

所以請記住：

• 固定位置的 div（即粘性頁腳）
• 絕對定位的 div（即流動的頁腳）

Answer 3

看起來你需要固定的頁腳。