14

我试图让一个 div 动画 0% - 100% 相对于元素的滚动百分比。

现在我已经设置了一些变量，但是我在尝试按百分比计算一个的高度时遇到了麻烦。

我们可以很容易地设置起始宽度，也可以很容易地检测滚动，因为我们可以获得触发动画的元素的高度，但我无法以百分比的形式获得它。

如果我能弄清楚如何返回滚动的高度百分比，那么这应该很容易。

$(window).scroll(function() {

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

    $('.bar-long').css('width', scrollPercent +"%"  );

});

这是一个 jsfiddle，http://jsfiddle.net/SnJXQ/

这是基于 body 元素滚动百分比的动画条。

从 0% 到 100% 的动画（嗯，它不是真的，但我不知道为什么）。

我想要做的是获取 .post div 的滚动百分比，然后相对于该设置动画条。IE。滚动 10% 的 .post，.bar-long 是 10% 宽度，滚动 70% 的 .post，.bar-long 是 70% 宽度。

4

3 回答 3

26

演示

您的问题与如何在 JavaScript 中获取 HTML 元素的水平滚动百分比相同？，但垂直。

然后，要获得垂直滚动的百分比，请使用

/*  JS  */ var scrollPercentage = 100 * containeR.scrollTop / (containeR.scrollHeight-containeR.clientHeight); 
/*jQuery*/ var scrollPercent = 100 * $(containeR).scrollTop() / ($(containeD).height() - $(containeR).height());

在你的情况下，containeR = window; containeD = document：

var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
于 2013-10-27T03:14:08.390 回答
6

好的，我知道您要达到的目标....事实上，我只是做了一些非常相似的事情。我在那里发现的大多数解决方案也仅适用于具有窗口或文档属性的整页示例。相反，我需要在一个特定的 div 中使用它，在我的情况下，它实际上用于更新另一个 div 的水平位置。

首先，您需要将滚动事件附加到 $('.post')

接下来， $('.content') 的高度将等于您的实际滚动高度

最后，应用您的百分比公式： (Y / (scrollHeight - postHeight)) * 100 = scrollPercent

因此，您的代码应如下所示，而不是使用文档或窗口属性：

$('.post').scroll(function() {
  var currY = $(this).scrollTop();
  var postHeight = $(this).height();
  var scrollHeight = $('.content').height();
  var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
});

你可以在这里找到小提琴：JS Fiddle For Div Scroll Percentage

我实施的当前项目位于此处：垂直滚动驱动水平位置

我希望这能解决你的问题:)

于 2013-11-27T22:07:47.377 回答
2

假设您要跟踪页面中某个 IFrame 中找到的某个文档的滚动。

object.addEventListener("scroll", documentEventListener, false);

那么你的事件监听器应该是这样的：

function documentEventListener(){
  var currentDocument  = this;
  var docsWindow       = $(currentDocument.defaultView); // This is the window holding the document
  var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
  var scrollTop        = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
  var docHeight        = $(currentDocument).height();    // This is the full document height.

  var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
  var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
  console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}
于 2017-06-02T12:17:39.940 回答