显示图像直到滚动

Show image until scroll?

本文关键字：滚动 图像 显示图 显示      更新时间：2023-09-26
我的

网页上是否有可能有一个图像，该图像在进入页面时出现，然后在用户滚动后消失？

基本上，我希望

内容一侧有一个向下的箭头，然后我希望它在用户滚动后消失。

这是否可能仅使用CSS或JavaScript作业？

这是一个快速的 jQuery 代码段

$(function() {
    var $img = $('#myImg');
    $(document).on('scroll', function() {
        $img.hide();
    });
});

更新 - 若要仅在未滚动到顶部时隐藏，请使用以下命令： 

$(function() {
    var $img = $('#myImg');
    $(document).on('scroll', function() {   
        $img.toggle(!$(this).scrollTop());
    });
});

演示：http://jsfiddle.net/seancannon/XB2r6/

如果您使用的是纯JavaScript，请尝试以下操作： 

var img = document.getElementById('ImageId');
window.onscroll = function (e)
{
     img.style.display = 'none';
}

下面是完整的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
</head>
<body>
<img src="http://placekitten.com/200/300" id="ImageId" alt="an image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>


<script>
var img = document.getElementById('ImageId');
window.onscroll = function (e)
{
     img.style.display = 'none';
}
</script>
</body>
</html>

您需要使用 javascript 并为图像设置滚动事件处理程序，使其在触发滚动事件时消失。

相关文章：