分层div视差效果

Question

我想要达到的效果是在此Site上，而我仅在移动设备上需要它。正如您所看到的，它是分层的div效果，当滚动时，广告被粘在背面，使其具有深度！

到目前为止，这是我所掌握的，但是我不确定我是否朝着正确的方向前进，任何输入都是值得的！

我试图做的是，将所需的div放在视线对准的位置，但是分层确实可以按照我想要的方式正常工作，就像在该站点上一样顺利！

function isScrolledIntoView(elem) {
   			var docViewTop = $(window).scrollTop();
    		var docViewBottom = docViewTop + $(window).height();
    		var elemTop = $(elem).offset().top;
    		var elemBottom = elemTop + $(elem).height();
    		return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
		}



var mobImg = $(".banner_img_mobile").find("img");
    var mobContainer = $(".banner_img_mobile").find("img");
    $(window).scroll(function() {
	    	if(isScrolledIntoView(mobContainer)) {
	    		console.log("in");
	    		mobImg.removeClass("none");
	    		mobImg.addClass("fixed");
    		} else {
    			console.log("out");
    			mobImg.removeClass("fixed");
    			mobImg.addClass("none");
    		}
   });

.banner {
    position: relative;
    max-width: unset !important;
    margin-left: -20px !important;
    margin-right: -20px !important;

    .banner_container {
        background-color: #e7e6e4;
        min-height: 600px;

        &:before,
        &:after {
            color: #fff;
            text-align: center;
            display: block;
            width: 100%;
            background-color: #000;
            text-transform: uppercase;
            font: 10px/10px Helvetica, Arial, sans-serif;
            padding: 5px 0px;
            z-index: 1;
        }

        &:before {
            content: 'Advertisement';

        }

        &:after {
            content: 'Scroll to continue with content';
            position: absolute;
            bottom: 0;
        }

        .banner_content {
            position: relative;
            padding-top: 50px;
            padding-bottom: 80px;

            .banner_link {}

            .banner_img_mobile {
                display: none;
                position: relative;

                figure {
                    overflow: hidden;

                    .fixed {
                        position: fixed;
                        opacity: 1;
                        top: 50%;
                        left: 0;
                        right: 0;
                    }

                    .none {
                    	opacity: .5;
                    }
                }

                @include mobile() {
                    display: block;
                }
            }
    }
}

<div class="banner">
	<div class="banner_container">
   		<div class="banner_content">
  			<a class="banner_link" href="">
			<div class="banner_img_mobile">
			<img src="ad.jpg">
  				</div>
	</a>
</div>
</div>
</div>