Javascript 更雄辩地编写jQuery-组合逻辑

我写了一个简单的脚本，效果很好

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var uiscroll;
mywindow.scroll(function () {
uiscroll = mywindow.scrollTop();
if (uiscroll > mypos && !up) {

$('div').addClass('down');
    up = !up;
    console.log(up);
} else if(uiscroll < mypos && up) {

$('div').removeClass('down');
    up = !up;
}
mypos = uiscroll;

 if (mywindow.scrollTop() > 200) { 
  $('div').addClass('test');
}
else {
   $('div').removeClass('test');
}

});

var mywindow=$（窗口）；
var mypos=mywindow.scrollTop（）；
var-up=false；
乌斯克罗尔变种；
mywindow.scroll（函数（）{
uiscroll=mywindow.scrollTop（）；
如果（uiscroll>mypos&&！up）{
$（'div'）.addClass（'down'）；
向上=！向上；
控制台日志（up）；
}否则如果（uiscroll200）{
$（'div'）.addClass（'test'）；
}
否则{
$（'div'）.removeClass（'test'）；
}
});

脚本根据滚动的三种不同条件将三种不同的css状态应用于div。向上或向下&卷轴距离顶部的距离

让我烦恼的是，必须有更好的、更雄辩的方式来写这篇文章，而不是我自己拼凑出来的。不过我还是不能完全理解

只是想学着更好地编写脚本，这样我写的东西就不会那么可笑了。我通过看例子学习得最好

感谢您的帮助/指导。

以下是我的尝试

var mypos = 0;
var up = false;
var $div = $('div');
$(window).scroll(function () {
    var uiscroll = $(this).scrollTop();
    if (uiscroll > mypos && !up) {
        $div.addClass('down');
        up = !up;
    } else if(uiscroll < mypos && up) {
        $div.removeClass('down');
        up = !up;
    }
    mypos = uiscroll;
    $div.toggleClass('test',uiscroll>200);
});

jsFiddle，这样您就可以测试它了

以下是我的尝试

var mypos = 0;
var up = false;
var $div = $('div');
$(window).scroll(function () {
    var uiscroll = $(this).scrollTop();
    if (uiscroll > mypos && !up) {
        $div.addClass('down');
        up = !up;
    } else if(uiscroll < mypos && up) {
        $div.removeClass('down');
        up = !up;
    }
    mypos = uiscroll;
    $div.toggleClass('test',uiscroll>200);
});

jsFiddle，这样您就可以测试它了

---

谢谢。看起来更简洁。它只有一个问题。当我阅读您的代码时，我认为它应该可以工作，但它没有：德赫。。是的，代码越短并不意味着越好。在发布之前，我在一个JSFIDLE中测试了它，以确保我没有破坏任何东西。我的代码假设文档已经准备好了。是的，我正要问你们同样的问题。每当我看到一个代码既不会触发也不会出错，我就添加文档。准备好看看是否可以修复它。将document.ready添加到代码中可以使其正常工作。我从未准确地理解何时需要document.ready。我知道js不能在html元素绘制之前启动。但我真的不明白这部分。“我的代码假设文档准备好了”-不测试您的代码我怎么知道这一点？顺便说一下，感谢您在代码中提供解释。您的解释和代码示例一样有用。Javascript可以在绘制任何html之前执行，只是如果js试图在DOM准备就绪之前访问它，那么它将失败。所以，在doc准备好之前，您可以做其他事情，比如数学、ajax请求、应用程序初始化，因为这些代码不涉及DOM。通常，每当看到jquery对象

$

，您都应该假设代码发生在文档中。因为当文档还没有准备好时，使用jQuery DOM函数是没有意义的。很乐意帮忙，谢谢。看起来更简洁。它只有一个问题。当我阅读您的代码时，我认为它应该可以工作，但它没有：德赫。。是的，代码越短并不意味着越好。在发布之前，我在一个JSFIDLE中测试了它，以确保我没有破坏任何东西。我的代码假设文档已经准备好了。是的，我正要问你们同样的问题。每当我看到一个代码既不会触发也不会出错，我就添加文档。准备好看看是否可以修复它。将document.ready添加到代码中可以使其正常工作。我从未准确地理解何时需要document.ready。我知道js不能在html元素绘制之前启动。但我真的不明白这部分。“我的代码假设文档准备好了”-不测试您的代码我怎么知道这一点？顺便说一下，感谢您在代码中提供解释。您的解释和代码示例一样有用。Javascript可以在绘制任何html之前执行，只是如果js试图在DOM准备就绪之前访问它，那么它将失败。所以，在doc准备好之前，您可以做其他事情，比如数学、ajax请求、应用程序初始化，因为这些代码不涉及DOM。通常，每当看到jquery对象

$

，您都应该假设代码发生在文档中。因为当文档还没有准备好时，使用jQuery DOM函数是没有意义的。很乐意帮忙。