javascript - 淡入自动向下滚动(href ="#")

Question

我有图像按钮:

                <a href="#our-apps"><img src="assets/img/arrow-down.png" width="350"/></a>          

它将使用 jquery 平滑向下滚动到 ID 为#our-apps 的 div。
当有人滚动或单击将使用平滑滚动方法自动向下滚动到#our-apps 的图像时，我想在 ID 为#our-apps 的 div 容器中淡入淡出。
这是 div #our-apps 的代码:

            <div class="main" id="our-apps">
            <section>
                <h1>Our Apps</h1>
                <img src="assets/img/htc.png" align="centerleft" alt="HTC" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="assets/img/htc.png" align="centerright" alt="HTC" />
            </section>
        </div>

谢谢。

Answer 1

实现这一点的一种方法是观察窗口滚动并检查您的 div 是否在可见区域内

$(window).on('scroll', function(){
  if($(this).scrollTop() + $(this).innerHeight() > $('#our-apps').offset().top){
    $('#our-apps').addClass('visible');
  }
});

跨界

#our-apps{
  opacity: 0;
  transition: opacity .5s ease-in-out;
  &.visible{
    opacity: 1;
  }
}

为什么我使用不透明度而不是 jquery 的隐藏/显示是因为我需要 het div 偏移量 - 如果它有“显示:无”属性，偏移量等于 0。

在这里查看:https://jsfiddle.net/auzxqx42/