jsfiddle如何获取小提琴内部的scrollTop值 [英] jsfiddle how do I get the scrollTop value inside a fiddle

问题描述

这是jsfiddle

我希望在scrolltop达到if语句中指定的值时更改类...

I want the classes to change when the scrolltop reaches the values specified in the if statement...

我不知道我犯了什么愚蠢的错误，导致我无法正常工作

I don't know what stupid mistake I have made that I can't get it to work

推荐答案

您的代码有些错误:

• 我不认为jQuery具有onscroll函数
• 如果$('#main'<-在这里
，则第二个缺少右括号
• 如果不这样做，您会错过scrollTop函数的括号
• 您正在检查main的scrollTop值-因为它永远不会滚动，所以它将一直为0，您正在滚动窗口

• I don't think jQuery has an onscroll function
• You have a missing closing bracket on your second if $('#main' <- here
• Staying with that if, you have missed the brackets off the scrollTop function
• You are checking the scrollTop value of main - it will always be 0 as it never scrolls, you are scrolling the window

尝试以下操作(更改注释)；

Try the following (changes in comments);

$(window).on('scroll', function() { // change to scroll rather than onscroll
  var scrollTop = $(this).scrollTop(); // get scroll top of the thing that is scrolling and cache for better performance
  if (scrollTop > 100) {
    $("#container").addClass("red");
  } else if (scrollTop > 500) {
    $("#container").removeClass("red").addClass("blue"); // chain actions
  } else {
    $("#container").removeClass("red blue"); // you can pass two classes into this
  }
});

如果您在小提琴中使用它并检查容器，您将看到该类已添加(在类更改之前，它不会在屏幕上消失，因为它不会改变颜色)

If you use this in your fiddle and inspect the container, you will see the class get added (you won't see it change colour as it goes off screen before the class changes)

这篇关于jsfiddle如何获取小提琴内部的scrollTop值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！