Show image until scroll?

Question

Is it possible to have an image on my webpage that is present upon entering the page and then disappears after the user scrolls?

Basically I want an arrow to the side of my content pointing down and then I want it to vanish after the user scrolls.

Is this possible with just CSS or is it a javaScript job?

You should check this page http://stackoverflow.com/questions/10605197/detect-if-user-is-scrolling — Sarge, Sep 13 '13 at 15:53

AlienWebguy · Accepted Answer · 2013-09-26T20:30:05.177

3

Here's a quick jQuery snippet

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

Update - To only hide if not scrolled to the top, use this:

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

Demo: http://jsfiddle.net/seancannon/XB2r6/

edited Sep 26 '13 at 20:30

answered Sep 13 '13 at 15:54

AlienWebguy

76,997
17
122
145

I've put this in but it's not doing anything.. the image I want to vanish has the id "myImg" is that right? – SaturnsEye Sep 13 '13 at 16:19
Don't forget to include jQuery :) Add this to your ``: `` – AlienWebguy Sep 13 '13 at 16:33
Fantastic! this works perfectly. Is there anyway to make my image reappear when I scroll back to the top? I tried changing 'scroll' to 'top and 'hide' to 'show' but i'm not good a JS so it did not work :( – SaturnsEye Sep 25 '13 at 15:41

Rayhan Muktader · Answer 2 · 2013-09-13T17:34:38.597

Try this if you are using plain javascript:

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

Here's the complete code:

<!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>

I would change `img.style.visibility = 'hidden';` to `img.style.display = 'none';` Otherwise it'll take up empty space in the DOM flow. — AlienWebguy, Sep 13 '13 at 16:34
I would also put the `var img = document.getElementById('ImageId');` outside of the `onscroll` listener or else it has to find that element every scroll event instead of using object cache. — AlienWebguy, Sep 13 '13 at 16:35

score 0 · Answer 3 · answered Sep 13 '13 at 15:52

0

You need to use javascript and set up a scroll event handler for your image, making it disappear when the scroll event is fired.

answered Sep 13 '13 at 15:52

BenM

4,218
2
31
58

1

How about adding a brief example? – Itay Sep 13 '13 at 15:54

Show image until scroll?

3 Answers3