CODEWITHSUNDEEP
javascriptcss
SaturnsEye
SaturnsEye

Reputation: 6499

Show image until scroll?

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?

Upvotes: 1

Views: 166

Answers (3)

SeanCannon
SeanCannon

Reputation: 77966

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/

Upvotes: 3

Rayhan Muktader
Rayhan Muktader

Reputation: 2106

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>

Upvotes: 1

BenM
BenM

Reputation: 4278

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

Upvotes: 0

Related Questions