如何使用jqueryscroll事件&；偏移量/位置、css还是javascript？

您是如何在css、javascript或jquery中获得此结果的，还是所有这些的组合：

我曾经问过一个类似的问题，但没有人回答。 有人说,

"Maybe you can use javascript (or bether JQuery) for this.

If you use JQuery, you can use the scroll event. If you are scrolling, do a 
check if it hits the other div. https://api.jquery.com/scroll/

Checking the positions of the divs is possible with offset/position.     
http://api.jquery.com/offset/ https://api.jquery.com/position/

If you want to change the background, you give the div a background color  
that is pink. If it hits then you can add an additional background-image   
that has a specific background-position 
(http://www.w3schools.com/cssref/pr_background-position.asp xpos ypos).


 I don't have tried it yet, but I guess it is possible that way."

---

所以我的问题是，你会怎样做才能得到这个结果，还是不管用什么方法？

我在几个小时的努力后想出了这个办法。做这件事很有趣，所以我和大家分享

$(document).ready(function() {
var initScrollTop = $(window).scrollTop();
$('.div1').css('top', (initScrollTop+100)+"px");

$(window).scroll(function () {
    var top = parseInt($('.div1').css('top').split("px")[0]);

    // I GIVE A FIXED TOP TO .DIV1
    var scrollTop = $(this).scrollTop() + 100;
    $('.div1').css('top', scrollTop+"px");

    // GETTING SOME VALUES

    // DIV1
    var div2Top = parseInt($('.div2').css('top').split('px')[0]);
    var div2Height = parseInt($('.div2').css('height').split('px')[0]);
    var div2Bottom = parseInt($('.div2').css('bottom').split('px')[0]);

    // DIV2 
    var div1Width = parseInt($('.div1').css('width').split('px')[0]);
    var div1Height = parseInt($('.div1').css('height').split('px')[0]);
    var div1Top = parseInt($('.div1').css('top').split('px')[0]);
    var div1Bottom = parseInt($('.div1').css('bottom').split('px')[0]);
    var div1Left = parseInt($('.div1').css('left').split('px')[0]);

    // WE ARE GOING THROUGH THE GREEN BOX
    if(scrollTop + div1Height > div2Top) {


        // OUTSIDE OF THE GREEN BOX (.div2)
        if(scrollTop + div1Height > div2Height + div2Top) {


           var div3Height = div2Top + div2Height - scrollTop;
            $('.div3').css('top', scrollTop+ "px")
                     // .css('bottom', div2Bottom + "px")
                      .css('width', div1Width + "px")
                      .css('height', div3Height + "px")
                      .css('visibility','visible');
                      console.log("I'm out");
        } 

        // INSIDE OF THE GREEN BOX (.div2)
        else {

            var div3Height = (div1Top > div2Top) ? div1Height : scrollTop + div1Height - div2Top;
            var div3Top = (div1Top > div2Top) ? div1Top : div2Top;
            $('.div3').css({
                'top' : div3Top + "px",
                'left': div1Left + "px",
                'width': div1Width + "px",
                'height': div3Height + "px",
                'visibility':'visible'
                });

        }

    } else { 
        $('.div3').css('visibility','hidden');
    }


    // WE ARE ABSOLUTELY OUT OF THE GREEN BOX (FROM THE BOTTOM GOING DOWN)
    if(scrollTop > div2Top + div2Height) {
      $('.div3').css('visibility','hidden');   
    }


}); 
});

这里有一把小提琴，你可以试一试

所以基本上它所做的就是创建三个div，其中两个是可见的，并且相互“碰撞”，另一个开始隐藏，只有当

div1

的位置在

div2

的范围内时才会显示。此

div3

（第三个div）将显示在

div1

上（请参见

z-index

）。当它完全开箱即用时，

div3

将被隐藏

我不知道还有什么要解释的代码，我不知道（我也不认为，我花了一段时间才让它工作起来）它的功能是否可以理解。如果你有什么要问的，我会读的；）

---

希望它能帮上忙

还有一件事，一切都很好，但我只有一个问题。请注意，当div1超过div2时，宽度不会自动调整为div2，如果您从我链接的小提琴中理解我的意思的话。我该如何解决这个问题？所以基本上高度是很大的，我怎样才能得到同样的宽度呢？可能吗？这是因为我将

div3

的宽度调整为

div1

的宽度，并且在CSS中您将

div1

修改为700px。你可以做两件事：1。将经过的位置更改为

div1Width

（并添加

div2Width

，因为我没有使用它，所以我没有添加它），或2。在CSS中更改

div1

的宽度以匹配

div2

的宽度。