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。向上或向下＆amp;卷轴远离顶部的距离。

让我烦恼的是，除了我一起攻击之外，必须有更好，更有说服力的写作方式。我虽然无法完全绕过它。

只是努力学习更好地编写脚本，以便我放在一起并不是那么可笑。通过查看示例，我学得最好。

感谢任何帮助/指导。

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 var，因为它没有必要。 mypos可以用0初始化。

您可以使用$(this)引用滚动处理程序内的窗口。

不要告诉jQuery多次查找div，而是告诉它一次找到它并将其存储在jquery对象中。实际上，多次搜索相同的元素非常昂贵/浪费，特别是在多次触发的滚动事件中。如果您需要多次引用同一元素，最好将其存储在变量中。

toggleClass('classname',boolean)

只是

的简写

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

jsFiddle所以你可以测试它

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

编写jQuery更有说服力 - 结合逻辑

1 个答案: