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

Question

我希望一组图像在用户向下滚动时淡入淡出（显示：块；position：固定；），然后在用户向上滚动时淡出（显示：无；）。 我已经想出了如何使向下滚动而不是向上滚动。 任何帮助将非常感激

 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>

:-)我的代码

Answer 1

从所有图像中删除display:none ，同时从 JS 中删除 CSS 以display样式。

试试下面的代码它可能对你有帮助

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