How to disable scrollTop() effect after click on onClick() event

Question

I am using scrollTop() event to show/hide div in certain position also I am using onClick() event to permanently hide div, the event is working good but the problem is that when i scrolling page then the div showing again. My code is as under.

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>

Try using a bool that indicates if you have enter on ".removebg" function and check it before fadeIn the div — Nestoraj
– Nestoraj, Commented Jul 7, 2016 at 11:57

Shiv A · Accepted Answer · 2016-07-07 11:54:56Z

1

Use

$(".benchdiv").remove();

instead of

$(".benchdiv").hide();

to permanently remove the div.

Works?

answered Jul 7, 2016 at 11:54

Shiv A

1,2514 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashkan Mobayen Khiabani · Accepted Answer · 2016-07-07 11:57:16Z

0

You can either Remove the element:

$(".benchdiv").remove();

or if you will use it later you can do something like:

<script type="text/javascript">
var clicked = false;
    $(document).scroll(function() {
  if(!clicked){
        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();
            clicked = true;
        });
    });
</script>

answered Jul 7, 2016 at 11:57

Ashkan Mobayen Khiabani

34.4k35 gold badges112 silver badges187 bronze badges

Collectives™ on Stack Overflow

How to disable scrollTop() effect after click on onClick() event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related