Question

我有

<img class="arrow_down" src="arrow_down.png" alt="scroll down" style="max-width: 5%; height: auto;">

现在，我希望该图片可见，直到我向下滚动网页，所以从第一个滚动中隐藏。我用java-script或jQuery编写代码：

jQuery(function($, undefined) {
  if ($("body").scrollTop() = 0 || $("html").scrollTop() = 0) {
            $(".arrow_down").fadeIn(400);
        }

        else {
            $(".arrow_down").hide();
        }

    };

这不起作用，请帮帮我......

Answer 1

您可以这样做：

$(function () {
  $('.arrow_down').hide();
  var curScroll = $(window).scrollTop();
  $(window).scroll(function() {
    if (curScroll < $(window).scrollTop())
      $('.arrow_down').show();
    if ($(window).scrollTop() == 0)
      $('.arrow_down').hide();
    curScroll = $(window).scrollTop();
  });
});

这里发生的是，当滚动完成时，脚本会检查滚动是否已完成。如果滚动仅向下，则显示向下箭头。

Answer 2

将窗口上的'scroll'事件绑定到隐藏图像的功能。

jQuery(document).ready(function(){
    if(jQuery(window).scrollTop() != 0)
        jQuery('.arrow_down').hide();
    jQuery(window).on('scroll', function() {
        jQuery('.arrow_down').hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img class="arrow_down" src="http://dummyimage.com/600x400/000/fff" alt="scroll down" style="max-width: 5%; height: auto;"/>
<div style="height:500px;">&nbsp;</div>

如果要再次滚动到顶部显示，请执行以下操作。

jQuery(window).on('scroll', function() {
  jQuery('.arrow_down').toggle( $(this).scrollTop() == 0);
});

用jQuery隐藏图标

2 个答案: