酒吧，從頁面底部開始，向上滾動，然後粘到頂部

Question

我想重現一個我腦海中想到的想法。它將在其中一個長滾動頁面中。

導航欄將從初始屏幕的底部開始。一旦開始向下滾動，它會以相同的節奏向上滾動，但一旦到達頂部，它就會保持固定。如果您回滾到頂部，則會回到原來的位置。

它會是這樣的：http://codepen.io/chrissp26/pen/xEAqC固定在與您滾動相同的數字標記，然後堅持到頂部，除非您向後滾動到數字。

示例代碼：

$(document).on("ready", function() { 
 

 
    sortTheFooterOut(); 
 

 
}); 
 

 
function sortTheFooterOut() { 
 

 
    footer = $("#footer"); 
 

 
    $(window).on("scroll", function() { 
 

 
    if ($(window).scrollTop() > 0) { 
 

 
     if (!footer.hasClass("fixed")) { 
 
     footer.fadeOut(250, function() { 
 

 
      footer.addClass("fixed").fadeIn(250); 
 

 
     }); 
 
     } 
 
    } else { 
 
     footer.fadeOut(250, function() { 
 

 
     footer.removeClass("fixed").fadeIn(250); 
 

 
     }); 
 
    } 
 

 
    }); 
 
}

body { 
 
    font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
} 
 
h1 { 
 
    font-family: "Segoe UI Light", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
    color: #999; 
 
    font-weight: normal; 
 
    margin: 0; 
 
} 
 
footer { 
 
    background: #008aca; 
 
    padding: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Footer Scroll</h1> 
 
1 
 
<br>2 
 
<br>3 
 
<br>4 
 
<br>5 
 
<br>6 
 
<br>7 
 
<br>8 
 
<br>9 
 
<br>10 
 
<br>11 
 
<br>12 
 
<br>13 
 
<br>14 
 
<br>15 
 
<br>16 
 
<br>17 
 
<br>18 
 
<br>19 
 
<br>20 
 
<br>21 
 
<br>22 
 
<br>23 
 
<br>24 
 
<br>25 
 
<br>26 
 
<br>27 
 
<br>28 
 
<br>29 
 
<br>30 
 
<br>31 
 
<br>32 
 
<br>33 
 
<br>34 
 
<br>35 
 
<br>36 
 
<br>37 
 
<br>38 
 
<br>39 
 
<br>40 
 
<br> 
 
<footer id="footer">Footer</footer>

Answer 1

這樣的事情，我猜？

Demo

$(function() { 

var gate = $(window), 
footer = $('#footer'), 
space; 

gate.on('load resize', function() { 

    clearTimeout(redraw); 

    var redraw = setTimeout(function() { 
    space = gate.height()-footer.outerHeight(); 
    sortTheFooterOut(); 
    }, 150); 
}) 
.scroll(sortTheFooterOut); 

function sortTheFooterOut() { 

    var current = gate.scrollTop(), 
    stuck = footer.hasClass('fixed');  

    if (current > space) { 
    if (!stuck) { 
    footer.addClass('fixed'); 
    } 
    } 
    else if (stuck) footer.removeClass('fixed'); 
} 
}); 

增加了一個檢查，以正確應用類時，當它在頁面上用戶登陸一個緩存的滾動位置。特別是Opera對此很固執 - 它在窗口onload事件之後重新定位，因此超時。還包括一些重新調整反彈。對於組合事件，超時時間比自身負載的絕對必要時間稍長。

在我嘗試解決評論中rockmandew提到的重疊內容的問題之前，需要關於確切文檔結構的更多信息。不想浪費時間......或者在腳本上過度使用它。