JSFiddle example

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");    
});

Div在页面上按比例关注滚动条

2 个答案:

JSFiddle example