Div, чтобы следить за полосой прокрутки пропорционально на странице

Question

Я сейчас борюсь за липкий элемент, который должен прокручиваться пропорционально на странице. Сверху до нижнего колонтитула, несмотря на высоту страницы. Таким образом, он на самом деле придерживается верхней части полосы прокрутки в начале, а затем до конца в конце. Или он просто следует за колесом прокрутки.

Есть ли шанс сделать это с помощью jQuery?

Ниже приведен стартовый код с обычным «липким» div.

$(window).scroll(function(){ 
$("#sticky") 
.animate({"marginTop":($(window).scrollTop())+"px"}, "fast");}); 

https://jsfiddle.net/flakessp/cxr78xc8/

Answer 1

ли вы имеете в виду что-то вроде этого?

$(window).scroll(function() { 

    // calculate the percentage the user has scrolled down the page 
    var scrollPercent = 100 * $(window).scrollTop()/($(document).height() - $(window).height()); 

    // get the height of the sticky element 
    var stickyHeight = $('.sticky').height(); 

    // calculate the margin top of the sticky element 
    var marginTop = (($(window).height() - stickyHeight)/100) * scrollPercent; 

    // set margin top of sticky element 
    $('.sticky').css('marginTop', marginTop); 
}); 

Fiddle

Answer 2

Таким образом, это один был немного сложнее, но здесь это:

JSFiddle example

В основном, мы используем пару вещей здесь:

Определение направления прокрутки в этом разделе:

var lastScrollPos = 0, 
... 
lastScrollPos < $window.scrollTop() 

Затем вы забыли учитывать такие факторы, как высота документа и окна. scrollTop выполняет именно то, что он говорит, и дает только номер от вершины окна просмотра до верхней части документа. Поэтому мы добавляем также видимую высоту с $(window).height().

Тогда это просто вопрос того фактора мы в высоту элемента тоже (следовательно, тройной оператор добавления 0 или $('#sticky').height() в зависимости от нашего спирального определения направления из предыдущего раздела.

Во всяком случае, вот полный JS :

var lastScrollPos = 0, 
    $window = $(window), 
    $document = $(document), 
    $sticky = $('#sticky'); 
$(window).scroll(function(){ 
    $sticky 
    .animate({"top":((($window.scrollTop() + (lastScrollPos < $window.scrollTop() ? $window.height() - $sticky.height() : 0))/$document.height()) * 100)+"%"}, "fast");  
});