Question

虽然我遇到了麻烦但很简单。页面上具有相同类（.proj）的多行元素。每个宽度为100％。我希望窗口顶部200像素范围内的div.proj有一个类.focused，否则，如果它不在顶部附近，则需要类.default 。我遇到的问题是挑出一个元素。

这就是我现在所处的位置，但它会找到所有元素.proj，而不仅仅是我正在寻找的元素。这是我到目前为止所做的，目前还没有真正起作用。

$(document).scroll(function(){
    var proj = $('.proj'),
        top = proj.offset().top - $(document).scrollTop();
    if (top < 200 && !proj.is('.default')){
        $(proj).removeClass('focused').addClass('default');
    }
    if (top > 200 && proj.is('.default')){
        $(proj).removeClass('default').addclass('focused');
    }  
});

Answer 1

我的示例适用于200px范围内的类.proj的每个元素。如果你的元素高度> = 200px，那么单挑一个元素就行了。如果不是，你应该告诉我们“挑出”单个元素的标准是什么（f.ex.最顶层？）在示例中，宽度不是100％，但概念很明确，我希望

$(window).scroll(checkScroll);

function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            $(e).toggleClass("focused",tp<200).toggleClass("default",tp>=200);
    });
}

检查JSFiddle：http://jsfiddle.net/hnYnS/

同时检查http://jsfiddle.net/hnYnS/2/以获得使用100％宽度的不同方法，并检查0到200px之间的范围。

$(window).scroll(checkScroll);  
function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            var isOk = tp<200 && tp>=0;
            $(e).toggleClass("focused",isOk).toggleClass("default",!isOk);
        });
}

Answer 2

我想你只想换掉你＆lt;和＆gt;

$(document).scroll(function(){
var proj = $('.proj'),
    top = proj.offset().top - $(document).scrollTop();
if (top > 200 && !proj.is('.default')){
    $(proj).removeClass('focused').addClass('default');
}
if (top < 200 && proj.is('.default')){
    $(proj).removeClass('default').addclass('focused');
}  
});

如果这不能解决问题，你应该为它创建一个jsfiddle，这样我们就可以确切地看到发生了什么。

从窗口顶部选择元素一定距离

2 个答案: