CODEWITHSUNDEEP
javascriptjqueryhtmlcssscrolltop
user2798954
user2798954

Reputation: 3

Prevent scrolling jquery script from running twice

I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?

Many thanks! Russ.

Javascript:

$(function () {
    var target = $(".box");
    if ($(window).scrollTop() > 30) {
        target.hide();
    }
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos > 30) {
            target.stop(true, true).fadeIn('slow');
        } else {
            target.stop(true, true).fadeOut('slow');
        }
    });
    $('a.close').click(function () {
        $($(this).attr('href')).slideUp();
        return false;
    });
});

Here is the jsfiddle link to my code: jsfiddle link

Upvotes: 0

Views: 625

Answers (3)

ias
ias

Reputation: 76

You can remove event scroll from window and for localStorage do something like that:

$(function () {
    var target = $(".box");
    if ($(window).scrollTop() > 30) {
        target.hide();
    }
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos > 30) {
            target.stop(true, true).fadeIn('slow');
        } else {
            target.stop(true, true).fadeOut('slow');
        }
        if(localStorage['noNotification'] == 'true'){
            $(window).off('scroll');
        }
    });
    $('a.close').click(function () {
        $($(this).attr('href')).slideUp();
        $(window).off('scroll');
        localStorage['noNotification'] = 'true';
        return false;
    });

});

Upvotes: 0

Donovan Charpin
Donovan Charpin

Reputation: 3397

You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation. You can store this choice with cookie but if the client deletes his cookies, it's lost.

Upvotes: 1

Dev
Dev

Reputation: 6786

try this http://jsfiddle.net/AbwXu/4/

var notdisplayed=true;
$(function(){ 
    var target = $(".box");
    if($(window).scrollTop() > 30){
      target.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 30  && notdisplayed){
            target.stop(true, true).fadeIn('slow');

        } else {
            target.stop(true, true).fadeOut('slow');
            notdisplayed=false;
        }
    });
    $('a.close').click(function() {
        $($(this).attr('href')).slideUp();
        notdisplayed=false;
        return false;
    });

Upvotes: 0

Related Questions