当达到某些滚动距离时，触发事件

我有一个基于VH的网站，该网站我想显示某个VH滚动时要显示的元素。我尝试使用带有变量的if语句滚动滚动的if语句，但它不会不断更新，因此它不起作用：

var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
if (distance >= 170) {
    //ACTIONS
};

我可以用什么来制作上述不断更新版本？

使用纯JS，您可以使用onscroll事件并将其绑定到身体。这是一个例子：

html

<body onscroll="myFunction()">
  ...
</body>

var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
function myFunction() {
  if (distance >= 170) {
    //ACTIONS
  }
}

如果您喜欢非标记解决方案，也可以使用jQuery的scroll()方法。使用此方法，您只需将IF语句放置在scroll()函数中即可。这是一个例子：

var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
$("body").scroll(function(){
  if (distance >= 170) {
    //ACTIONS
  }
});

希望这会有所帮助！

jQuery代码

$(window).scroll(function(){
            if ($(this).scrollTop() >= 170) {
                //actions...
            } else {
                //actions...
            }
        });

相关内容

最新更新

热门标签：