相对于可滚动页面上的垂直位置移动div(Moving a div relative to what vertical position you are on a scrollable page)

相对于可滚动页面上的垂直位置移动div(Moving a div relative to what vertical position you are on a scrollable page)

想象一下，我的网站溢出了视口高度的三倍。 我可以从上到下滚动这个网站。

是否可以创建一个div，该div从视口顶部移动到相对于已滚动的总页面数量的底部？

示例 - 有人会介意帮助我实现这样的目标吗？ 不知道是怎么做的。

编辑：

var scrollValue; var percent; var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); $(document).ready(function(){ $("button").click(function(){ scrollValue = $("body").scrollTop(); percent = (scrollValue / height) * 100; alert(percent); }); });

Imagine I have a website that overflows three times the viewport height. I can scroll on this website from top to bottom.

Is it possible to create a div that moves from the top of the viewport to the bottom relative to the amount of the total page that has been scrolled?

Example - Would someone mind helping me achieve something like this? Not sure how it was done.

Edit:

var scrollValue; var percent; var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); $(document).ready(function(){ $("button").click(function(){ scrollValue = $("body").scrollTop(); percent = (scrollValue / height) * 100; alert(percent); }); });

最满意答案

您可以尝试使用jQuery scrollTop() 。 请参阅jquery.com上的演示 。

想法：如果您了解此功能的两种使用类型（带/不带args），您可以使用相同的功能获取自定义滚动条的当前滚动位置，然后触发您的div滚动到相对滚动位置。

备用任务：如果要在鼠标滚轮移动时滚动自定义滚动条，我建议使用jquery mousewheel插件 -

$(window).mousewheel(function(turn, delta) { if (delta == 1) // going down else //going up // all kinds of code return false; });

You may try using jQuery scrollTop(). See the demo at jquery.com.

Idea: If you understand the both type of use of this function (with/without args) you can use this same function to get the current scroll position of your custom scrollbar, then trigger your div to be scrolled to the relative scrolling position.

Alternate Task: If you want to scroll the custom scrollbar on mousewheel move, I recommend to use jquery mousewheel plugin-

$(window).mousewheel(function(turn, delta) { if (delta == 1) // going down else //going up // all kinds of code return false; });