Question

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

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

例如：

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

这是JS FIDDLE：http://jsfiddle.net/nnkekjsy/3/

当我提到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>

JQUERY：

我添加了我的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

你正在寻找这样的东西吗？ http://jsfiddle.net/mcozkpv3/1/

这只是根据距离找到关闭元素并选择它的快速黑客。将data-did属性添加到每个项目div。

$（document）.ready（function（）{

$(window).scroll(function () {

    $('[data-did]').each(function (i, e) {
        var dist = $(e).offset().top - $('#div_menu').offset().top
        if (dist < 80) {
            $(e).addClass('closest');
        } else {
            $(e).removeClass('closest');
        }

    });


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

}）;

JQUERY-每次都参考特定的div

1 个答案: