写jQuery更优秀 - 组合逻辑

我已经写了一个简单的脚本，工作正常。写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'); 
} 

});

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

有什么令我烦恼的是，写作这件事的方式要比我一起入侵的更好，更有说服力。尽管如此，我还是无法把头围住。

只是试图学会更好地编写脚本，以便我放在一起不是很可笑。我通过查看例子学到了最好的东西。

感谢任何帮助/指导。

来源

2016-03-04 HackYa

这是我尝试

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)引用滚动处理函数内的窗口。

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

toggleClass('classname',boolean)

只是短手

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

的jsfiddle这样你就可以测试它

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

来源

2016-03-04 03:49:27

谢谢。看起来更简洁。它只有一个问题。当我阅读你的代码时，我认为它应该可以工作，但事实并非如此。：D – HackYa

呵呵..是的更短的代码并不总是意味着它更好。我之前在一个jsFiddle中测试过，只是为了确保我没有破坏任何东西。另外我的代码假定文档已准备就绪。 –

是的，我正要问你同样的问题。每当我看到一个不会触发的代码或错误时，我只是添加document.ready来查看是否修复了它。并将document.ready添加到您的代码使其工作。我从来不明白何时需要document.ready。我知道js在绘制html元素之前无法触发。但我真的不明白这一部分。 “我的代码假定文档已准备就绪” - 我怎样才能知道这一点，而无需测试您的代码？ – HackYa

写jQuery更优秀 - 组合逻辑

回答

相关问题