CODEWITHSUNDEEP
javascriptjquery
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

jQuery code keeps running after scroll

I want to show an page element after header element will be out ofthe viewport. To achieve this, I created simple JS:

var scrollHeight = $(document).scrollTop(),
    headerHeight = $('.big-header').outerHeight(true),
    setHead = 0;

    console.log(scrollHeight +' / '+ headerHeight);

if(scrollHeight >= headerHeight) {
    if(setHead == 0) {
        alert(setHead);
        setHead = 1;
    }
}

My problem is, alert(setHead) is running constantly. There's propably some minor thing I forgot, but I can't seem to get it done.

Fiddle here.

Upvotes: 1

Views: 107

Answers (2)

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Move your sethead out of the scroll function,

var setHead = 0;
$(window).scroll(function () {
    var scrollHeight = $(document).scrollTop(),
        headerHeight = $('.big-header').outerHeight(true);


    console.log(scrollHeight + ' / ' + headerHeight);

    if (scrollHeight >= headerHeight) {
        if (setHead == 0) {
            alert(setHead);
            setHead = 1;
        }
    } else {
        setHead = 0;
    }
});

http://jsfiddle.net/9P36u/1/

Upvotes: 2

Mritunjay
Mritunjay

Reputation: 25882

define var setHead = 0; before $(window).scroll(function().

In your function setHead is always being 0.

Upvotes: 2

Related Questions