多写jQuery口才——结合逻辑

Question

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

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

});

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

困扰我的是，必须有比我一起破解的更好、更多的 eloquent 编写方法。不过我还是不太明白。

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

感谢任何help/guidance。

Answer 1

这是我的尝试

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

我删除了 mywindow 变量，因为它不是必需的。 mypos可以用0初始化。

您可以使用 $(this) 在滚动处理程序中引用 window。

与其告诉 jQuery 多次查找 div，不如告诉它查找一次并将其存储在 jquery 对象中。多次搜索同一个元素实际上相当expensive/wasteful，尤其是在多次触发的滚动事件中。如果您需要多次引用同一个元素，最好将它存储在一个变量中。

toggleClass('classname',boolean)

只是

的简写

if(boolean is true)
    //add class
else
    //remove class

jsFiddle 所以你可以测试它

https://jsfiddle.net/guanzo/Ldp5b92s/

多写jQuery口才——结合逻辑

Writing jQuery more eloquenty - combining logic

javascript

css

jquery

scrolltop