计算用户滚动了多少(包括边距和填充)

问题描述

我遇到了一个非常烦人的问题.我正在尝试创建一个脚本，当用户滚动X像素(标题元素的高度)时，该脚本会更改菜单栏(CSS).但是，我尝试过的任何jQuery脚本都无法正确计算滚动距离.在经过一些像素后，它会停止计数，然后继续..然后恢复，停止，恢复等.

I'm stuck with a very annoying problem. I'm trying to create a script that changes the menu bar (CSS) when the user has X pixels scrolled (height of header element). However, any jQuery script I've tried doesn't calculates the scrolled distance correctly. After some pixels it stops counting, and continues.. and then resumes, stops, resumes, etc.

我认为这可能与填充和/或边距有关.无论如何，我需要一些支持.

I think it may have something to do with padding and/or margins.. Anyway, I need some support.

检出当前站点，并附加距离滚动"脚本.

Check out the current site, with a 'distance scrolled' script appended.

脚本:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  console.log(scrollTop);
});

推荐答案

您已经有了两个滚动条作为起点.将overflow: inherit;添加到您的身体的CSS中即可解决此问题.

You've got two scrollbars going for a start. Add overflow: inherit; to your body's css to solve this.

这应该可以大致执行您想要的操作.向下滚动120像素时，标题会向下滑动到内容上方.

This should do roughly what you want. At 120px scrolled down, a header slides down overtop the content.

如果这没有帮助，请准确描述您要达到的目标.

If this doesn't help, please describe exactly what you're trying to achieve a little better.

这篇关于计算用户滚动了多少(包括边距和填充)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！