Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to reappear.
Below is the code I am working on.
Javascript code
<script type="text/javascript">
$(document).scroll(function() {
if (screen.width > 768) {
var y = $(this).scrollTop();
if (y < 500) {
$('.benchdiv').fadeOut();
}
else {
$('.benchdiv').fadeIn();
}
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".removebg").click(function(){
$(".benchdiv").hide();
});
});
</script>
HTML Code
<div class="benchdiv">
<a href="http://www.benchmarkemail.com?p=636276" target=_blank><img src="//www.benchmarkemail.com/images/partner/banners/125x125.gif" width="125" height="125" border="0" /></a>
<div class="benchremove"><a href="javascript:void(0);" class="removebg glyphicon glyphicon-remove"></a></div>
</div>