jsfiddle如何获取小提琴内部的scrollTop值

本文介绍了jsfiddle如何获取小提琴内部的scrollTop值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是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)