How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

How do you get this result in css, javascript or jquery, or a combination of all:

你如何在css，javascript或jquery或者所有的组合中得到这个结果：

I asked and posted a similar question before, but no one answered it. Someone said:

之前我问过并发过一个类似的问题，但没有人回答。有人说：

"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."

So my question is, how would you go about doing it to get this result or regardless of what way?

所以我的问题是，你将如何去做这个结果或不管用什么方式？

1 个解决方案

#1

I came up with this after a couple of hours trying to make it work. It was pretty fun doing it, so I'm sharing it.

几个小时后我试图让它工作，我想出了这个。这样做非常有趣，所以我正在分享它。

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


}); 
});

Here's there a fiddle so you can test it http://jsfiddle.net/5076h670/2/

这里有一个小提琴，所以你可以测试它http://jsfiddle.net/5076h670/2/

So basically what it does is create three divs, two of them will be visible and 'collide' between each other, the other one starts hidden and it shows only when the position of the div1 is in the range of the div2. This div3 (the third div) will be shown over the div1 (see the z-index). When it's absolutely out of the box div3 will be hidden.

所以基本上它所做的是创建三个div，其中两个将是可见的并且彼此“碰撞”，另一个开始隐藏并且仅在div1的位置在div2的范围内时才显示。这个div3（第三个div）将显示在div1上（参见z-index）。当它完全开箱即用时，div3将被隐藏。

I don't know what else to explain about the code, I don't know if (and I don't think, it took me a while to make it work) it's understandable what it does. If you have something to ask I'll be reading ;)

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

Hope it helps

希望能帮助到你