javascript - 滚动时淡入和淡出的图像(jquery)

Question

我希望当用户向下滚动时，一组图像彼此淡入(显示: block ；位置:固定；)，然后当用户向上滚动时淡出(显示:无；)。我已经弄清楚如何使向下滚动起作用，但不能使向上滚动起作用。任何帮助将不胜感激

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

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

尝试下面的代码，它可能会帮助你

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>