我希望頁(yè)面內(nèi)容在向下滾動(dòng)時(shí)淡入,在向上滾動(dòng)時(shí)淡出,我使用了網(wǎng)站說(shuō)明(https://www.superhi.com/blog/how-to-add-web-design-elements-that -fade-in-and-out-on-scroll),并嘗試對(duì)其進(jìn)行一些更改以適合我的項(xiàng)目,但無(wú)法正常工作。我正在使用Dreamweaver。<script src="jquery-3.4.1.min.js"></script> <script src="fadein.js"></script> <script>$(document).on("scroll", function () { var pageTop = $(document).scrollTop() var pageBottom = pageTop + $(window).height() var tags = $(".fade") for (var i = 0; i < tags.length; i++) { var tag = tags[i] if ($(tag).position().top < pageBottom) { $(tag).addClass("visible") } else { $(tag).removeClass("visible") } }})</script> <div id="content" style="margin:-8px;"> <img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image"> <img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line"> <div id="mid"> <h1 class="fade">Whether youre in it for...</h1> <img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made"> <p class="fade">The food and drink,</p> <img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table"> <p class="fade">Getting some work done,</p> <img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee"> <p class="fade">The people,</p> <img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee"> <p class="fade">Or a good book,</p> <h2 class="fade">We got you covered!</h2> </div>當(dāng)我使用此頁(yè)面時(shí),該頁(yè)面只會(huì)正常顯示所有內(nèi)容,沒(méi)有任何東西褪色或不可見(jiàn)。
嘗試使用jquery使內(nèi)容在滾動(dòng)時(shí)淡入
翻翻過(guò)去那場(chǎng)雪
2021-05-14 14:08:38