Question

在小提琴中，您将在页面中央看到一个包含img旁边文字的DIV。

当我向下/向上滚动时，我需要使用jquery / javascript来影响最接近导航栏的div。 所有div都是同一个类，所以我对它们产生影响 - 而不是我需要的

例如：

我想要实现的目标：当我向下滚动时，最接近导航栏（黄色条）的div将被绘制（div）绿色，所以如果我向下滚动并且导航栏“崩溃”与div一起使用will涂成绿色，当他经过他并“消失”时，它将恢复原来的颜色，下一个div将涂成绿色。可能吗？

当我提到div时，我的意思是这一部分：

<div class="x" id="inside_center">
    <div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
    <div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>

修改

更新的JSFIDDLE：

http://jsfiddle.net/nnkekjsy/3/

我添加了我的jquery，因为你可以看到它仅适用于第一个，然后卡住..我需要将“传递”它沿着他下方的其他div，当它们到达同一点时。有任何想法吗？：

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
       var navHeight = $("#div_menu").outerHeight();
        if ( scrollVal > 55) {
            $('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
        } else {
            $('#left_inside_center').css({'position':'static','top':'auto'});
        }
    });
 });

Answer 1

如果我明白你想要做什么，你是否尝试过使用first-of-type来选择top div。

CSS3 selector :first-of-type with class name?

另一种解决方案是检查div和导航栏的位置并选择最接近的位置。

$(".left_side").each(function () {
    //compare scroll with div
    if(window.scrollTop() = $(this).position.top())
    {
        //do something
    }
});

我知道位置和滚动不会是相同的值，但你可以使用条件来放置一些范围。

修改：

我认为这就是你想要的。 navHeight和height变量应该在window.scroll函数之外，因为它们永远不会改变：

$(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
   var navHeight = $("#div_menu").outerHeight();
   var height = parseInt($(".right_side").css("height").split("px")[0]);

   $(".left_side").css({'position':'static','top':'auto'});
    $(".left_side").filter(function( ) {    
        return $(this).position().top - 10 < scrollVal && $(this).position().top  + height > scrollVal;  
    }).css({'position':'fixed','top' :navHeight+'px'});

});

工作小提琴：

http://jsfiddle.net/nnkekjsy/6/

JQUERY-在html页面中引用具有类的特定div作为其他div

1 个答案: