滚动时淡入淡出的图像（jquery）

Question

I want a collection of images to fade in on top of each other (display: block; position: fixed;) as the user scrolls down and then fade out (display: none;) as the user scrolls up. I have figured out how to make the scroll down work but not the scroll up. Any help would be much-appreciated

 var $img2 = $('#img-scroll2'); var $img3 = $('#img-scroll3'); var $img4 = $('#img-scroll4'); $(document).scroll(function() { $img2.css({ display: $(this).scrollTop() > 100? "block": "none" }); $img2.css({ opacity: $(this).scrollTop() > 100? "1": "0" }); $img3.css({ display: $(this).scrollTop() > 500? "block": "none" }); $img3.css({ opacity: $(this).scrollTop() > 500? "1": "0" }); $img4.css({ display: $(this).scrollTop() > 1000? "block": "none" }); $img4.css({ opacity: $(this).scrollTop() > 1000? "1": "0" }); });

 .textWrapper { display: block; width: 100%; height: 100vh; }.sideText { float: right; width: 40%; margin-right: 50px; padding-top: 20%; }.sizing img { height: 101vh; margin: -8px 0 0 -8px; }.sizing { position: fixed; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #img-scroll2, #img-scroll3, #img-scroll4 { display: none; opacity: 0; }

 <div id="img-scroll" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579533882-Q23FII8WTGOF7RSWK6CN/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-016.jpg" border="0" /></div> <div id="img-scroll2" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579447645-I0HOBG4HHM6JEMLB33BI/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-003.jpg" border="0" /></div> <div id="img-scroll3" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579926694-5OKJJFY5ZLU59LTOBPHT/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-019.jpg" border="0" /></div> <div id="img-scroll4" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579540213-CS2C08WJ0NTPFICQF8B6/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-017.jpg" border="0" /></div> <div class="textWrapper"> <div class="sideText"> Maecenas in nulla ut turpis cursus congue. Quisque eget erat diam. Vivamus in placerat neque. Suspendisse quis tincidunt massa. Vivamus condimentum gravida nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien vitae justo laoreet convallis ut ac arcu. Suspendisse ornare eleifend faucibus. Fusce volutpat blandit arcu. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, nisl non ullamcorper volutpat, orci ex rutrum nisl, ac dapibus risus ipsum sed massa. Suspendisse potenti. Pellentesque vitae auctor metus. Sed lorem sem, condimentum nec molestie eu, rhoncus eget purus. In commodo eleifend interdum. Quisque nec turpis vitae neque condimentum dapibus. Sed ut augue quam. Suspendisse potenti. Proin efficitur magna et molestie finibus. Praesent viverra rhoncus ex quis dapibus. Curabitur consectetur volutpat tellus sit amet sollicitudin. Etiam sed ipsum tellus. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Quisque cursus, odio at convallis finibus, sem mi ultrices lectus, convallis lacinia eros eros nec dolor. Suspendisse sollicitudin dolor sed ante ultrices, nec pulvinar felis cursus. Vestibulum scelerisque tellus in lorem consectetur, hendrerit porttitor felis venenatis. Nunc sit amet elementum tellus. Donec ultricies mi congue tincidunt pellentesque. Quisque aliquam maximus erat, vel cursus neque luctus non. Sed sed ultrices justo. Integer tempus ante id diam rutrum porta sit amet a lectus. Curabitur eget nulla enim. Praesent in aliquam mauris, nec efficitur justo. In hac habitasse platea dictumst. Donec pretium metus sed eleifend ultrices. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Nam convallis est id molestie volutpat. Pellentesque venenatis dapibus arcu sit amet congue. Quisque hendrerit nec purus at tincidunt. In sed velit justo. Nam fermentum leo lacus, tincidunt suscipit ex sagittis sed. Quisque posuere neque ut nisl semper, sit amet interdum tortor hendrerit. Nulla sit amet commodo erat. </div> </div>

:-) My code

Answer 1

Remove display:none from all images, also remove CSS for display styling from JS.

Try below code it may help you

 var $img2 = $('#img-scroll2'); var $img3 = $('#img-scroll3'); var $img4 = $('#img-scroll4'); $(document).scroll(function() { $img2.css({ opacity: $(this).scrollTop() > 100? "1": "0" }); $img3.css({ opacity: $(this).scrollTop() > 500? "1": "0" }); $img4.css({ opacity: $(this).scrollTop() > 1000? "1": "0" }); });

 .textWrapper { display: block; width: 100%; height: 100vh; }.sideText { float: right; width: 40%; margin-right: 50px; padding-top: 20%; }.sizing img { height: 101vh; margin: -8px 0 0 -8px; }.sizing { position: fixed; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #img-scroll2, #img-scroll3, #img-scroll4 { opacity: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="img-scroll" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579533882-Q23FII8WTGOF7RSWK6CN/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-016.jpg" border="0" /></div> <div id="img-scroll2" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579447645-I0HOBG4HHM6JEMLB33BI/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-003.jpg" border="0" /></div> <div id="img-scroll3" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579926694-5OKJJFY5ZLU59LTOBPHT/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-019.jpg" border="0" /></div> <div id="img-scroll4" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579540213-CS2C08WJ0NTPFICQF8B6/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-017.jpg" border="0" /></div> <div class="textWrapper"> <div class="sideText"> Maecenas in nulla ut turpis cursus congue. Quisque eget erat diam. Vivamus in placerat neque. Suspendisse quis tincidunt massa. Vivamus condimentum gravida nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien vitae justo laoreet convallis ut ac arcu. Suspendisse ornare eleifend faucibus. Fusce volutpat blandit arcu. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, nisl non ullamcorper volutpat, orci ex rutrum nisl, ac dapibus risus ipsum sed massa. Suspendisse potenti. Pellentesque vitae auctor metus. Sed lorem sem, condimentum nec molestie eu, rhoncus eget purus. In commodo eleifend interdum. Quisque nec turpis vitae neque condimentum dapibus. Sed ut augue quam. Suspendisse potenti. Proin efficitur magna et molestie finibus. Praesent viverra rhoncus ex quis dapibus. Curabitur consectetur volutpat tellus sit amet sollicitudin. Etiam sed ipsum tellus. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Quisque cursus, odio at convallis finibus, sem mi ultrices lectus, convallis lacinia eros eros nec dolor. Suspendisse sollicitudin dolor sed ante ultrices, nec pulvinar felis cursus. Vestibulum scelerisque tellus in lorem consectetur, hendrerit porttitor felis venenatis. Nunc sit amet elementum tellus. Donec ultricies mi congue tincidunt pellentesque. Quisque aliquam maximus erat, vel cursus neque luctus non. Sed sed ultrices justo. Integer tempus ante id diam rutrum porta sit amet a lectus. Curabitur eget nulla enim. Praesent in aliquam mauris, nec efficitur justo. In hac habitasse platea dictumst. Donec pretium metus sed eleifend ultrices. </div> </div> <div style="clear: both;"></div> <div class="textWrapper"> <div class="sideText"> Nam convallis est id molestie volutpat. Pellentesque venenatis dapibus arcu sit amet congue. Quisque hendrerit nec purus at tincidunt. In sed velit justo. Nam fermentum leo lacus, tincidunt suscipit ex sagittis sed. Quisque posuere neque ut nisl semper, sit amet interdum tortor hendrerit. Nulla sit amet commodo erat. </div> </div>

Answer 2

css:

.textWrapper {
            display: block;
            width: 100%;
            height: 100vh;
        }

        .sideText {
            float: right;
            width: 40%;
            margin-right: 50px;
            padding-top: 20%;
        }

        .sizing img {
            height: 101vh;
            margin: -8px 0 0 -8px;
        }

        .sizing {
            position: fixed;
            -webkit-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            opacity: 0;
            display: block;
        }

        .active{
            opacity: 1;
        }

js:

$(document).scroll(function() {
            var scrollY = window.scrollY;
            var images = $('.sizing');
            if (scrollY<100){
                $(images[0]).addClass('active').siblings().removeClass('active');
            } else if (scrollY>100 && scrollY<=500){
                $(images[1]).addClass('active').siblings().removeClass('active');
            } else if (scrollY>500 && scrollY<=1000){
                $(images[2]).addClass('active').siblings().removeClass('active');
            } else{
                $(images[3]).addClass('active').siblings().removeClass('active');
            }
        });