如何使代码中高度的像素值动态变化？

Question

我建立了一个小脚本，当用户向下滚动时，所选对象可以淡入。 我的问题是此脚本非常静态。 例如，如果将其应用于20个不同的对象，则每次都必须设置高度。 这是一个例子：

 $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 500) { $(".header-js-scroll-fade").css({"opacity" : "1"}); $(".home-vorteile").addClass("header-img-fade-in-by-scroll"); } else { $(".header-js-scroll-fade").css({"opacity" : "0"}); $(".home-vorteile").removeClass("header-img-fade-in-by-scroll"); } }); }); 

 .header-js-scroll-fade { opacity: 0; transition: 0.5s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="vorteile-text">Vertrauen durch,</h1> <section class="home-vorteile"> <div class="header-js-scroll-fade header-img-fade-in-by-scroll"> <img src="https://via.placeholder.com/500" /> <h2>Sicherheit.</h2> </div> <div class="header-js-scroll-fade header-img-fade-in-by-scroll"> <img src="https://via.placeholder.com/500" /> <h2>Neueste KI Technik.</h2> </div> <div class="header-js-scroll-fade header-img-fade-in-by-scroll"> <img src="https://via.placeholder.com/500" /> <h2>Beste Materialien.</h2> </div> </section> 

Answer 1

这将检查该元素是否对用户可见，如果可以，则添加该类，否则将其删除。 为了实现这一点，您只需将class header-js-scroll-fade应用于您想要的任何元素。

函数isInViewport来自用户TomPažourek，位于此处： https ://stackoverflow.com/a/40658647/8605830

 // https://stackoverflow.com/a/40658647/8605830 $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; $(document).ready(function () { $(window).scroll(function () { $('.header-js-scroll-fade').each(function () { if ($(this).isInViewport()) { $(this).addClass("visible"); } else { $(this).removeClass("visible"); } }); }); }); 

 .header-js-scroll-fade { opacity: 0; transition: 0.5s; } .header-js-scroll-fade.visible { opacity: 1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="vorteile-text">Vertrauen durch,</h1> <section class="home-vorteile"> <div class="header-js-scroll-fade"> <img src="https://via.placeholder.com/500" /> <h2>Sicherheit.</h2> </div> <div class="header-js-scroll-fade"> <img src="https://via.placeholder.com/500" /> <h2>Neueste KI Technik.</h2> </div> <div class="header-js-scroll-fade"> <img src="https://via.placeholder.com/500" /> <h2>Beste Materialien.</h2> </div> </section>