Question

我有图像按钮：

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

它将使用jquery将scrollldown平滑到div，使用id＃our-apps。
当有人滚动或点击将使用平滑滚动方法自动向下滚动到＃our-apps的图像时，我想淡入带有id＃our-apps的div containter。
这是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');
  }
});

SCSS

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

为什么我使用opacity而不是jquery隐藏/显示是因为我需要het div offset - 如果它有＆＃34; display：none＆＃34; property，offset等于0.

请在此处查看：https://jsfiddle.net/auzxqx42/

Answer 2

＆＃13;

var op = $("#our-apps").outerHeight();
var f = false;

$(window).on('scroll', function() {
f = true;
  if ($(this).scrollTop() >= (($(document).height() - $(this).height()) - $('#our-apps').innerHeight())) {
    
    $('#our-apps').fadeIn('slow');
  }else{
    f = false;
    $('#our-apps').fadeOut('slow');
  }
})

＆＃13;

#our-apps {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#our-apps">
  <img src="assets/img/arrow-down.png" width="350" />
</a>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<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>

＆＃13;

淡入自动滚动（a href =＆＃34;＃＆＃34;）

2 个答案: