Question

我有一个隐藏页面加载的徽标图片。我希望图片会在页面滚动后显示。

试过这种方法：

CSS：

#logo {
    display: none;
}

JS / JQuery的：

jQuery( document ).ready(function( $ ) {
    $(document).scroll(function() {
        var scroll = $(this).scrollTop();
        if (scroll >=100){
            $('#logo').show();
        } else {
            $('#logo').hide();
        }
    });
});

案例1：如果页面加载了scroll = 0，则在页面滚动徽标图像未显示之后。案例2：如果页面加载了滚动＆gt; 100，徽标图像正确显示或隐藏。

Answer 1

您的代码似乎在滚动上正常工作。如果您只需要在页面加载时根据滚动位置有条件地隐藏/显示图像，您可以在页面加载时以及滚动页面时调用隐藏/显示代码。

＆＃13;

jQuery(document).ready(function($) {
  function hideShow(scroll) {
    if (scroll >= 100) {
      $('#logo').show();
    } else {
      $('#logo').hide();
    }
  }
  hideShow($(this).scrollTop());
  $(document).scroll(function() {
    hideShow($(this).scrollTop());
  });
});

＆＃13;

body {
  height: 500vh;
}
#logo {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">

＆＃13;

如何使用scrollTop显示/隐藏图像

1 个答案: