达到某个滚动距离时触发事件jQuery

时间:2017-04-23 15:48:49

标签: javascript jquery html css

我有一个基于vh的网站,其中包含我想要在滚动某个vh时显示的元素。我尝试使用带有变量的if语句来滚动距离,但它不会不断更新,因此它不起作用:

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

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

3 个答案:

答案 0 :(得分:2)

使用纯JS,您可以使用onscroll事件并将其绑定到正文。这是一个例子:

HTML

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

JS

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

希望这有帮助!

答案 1 :(得分:0)

在window.onscroll方法中编写代码,每次滚动时都会调用该方法

Detect scroll using javascript

答案 2 :(得分:0)

Jquery代码

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