Div 在页面上按比例跟随滚动条

Question

我现在正在为应该在页面上按比例滚动的粘性元素苦苦挣扎。尽管页面有高度，但从顶部到页脚。所以它实际上在开始时粘在滚动条的顶部，然后在结束时粘在滚动条的底部。或者它只是跟随滚轮。

有机会用 jQuery 做吗？

下面是常用的起始代码 "sticky" 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()

然后，您忘记考虑文档和 window 高度等因素。 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");    
});

Div 在页面上按比例跟随滚动条

Div to follow scrollbar proportionally on a page

javascript

css

jquery

scrollbar

sticky

JSFiddle example