I'm using this code right now:

// JavaScript Document
$(document).scroll(function(){
    if($(document).scrollTop() >= 470) {
        $('div.slide-in-section1').effect('slide');
    }
});

And of course I did realize that whenever you scroll just a little more it will keep re-running this bit of code. But I figured I had a fix, which was this:

// JavaScript Document
$(document).scroll(function(){
    if($(document).scrollTop() >= 470) {
        $('div.slide-in-section1').effect('slide');
        $('div.slide-in-section1').delay(400).removeClass('slide-in-section1');
    }
});

But then literally nothing happened. So I'm figuring the delay is kind of being ignored or something... I don't know, just a guess. Anyways I'm just wanting a div to slide in when you scroll down to a certain point. But I don't want it to go away or re-run unless the page is reloaded. Would this be the right way to approach it or am I totally missing something?

delay is only for effect type calls

probably not the cleanest but this should work

$('div.slide-in-section1').effect('effect':'slide','complete':function(){$('div.slide-in-section1').removeClass('slide-in-section1');});

Alright so I used that code like so:

$(document).scroll(function(){
    if($(document).scrollTop() >= 470) {
        $('div.slide-in-section1').effect('effect':'slide','complete':function(){
            $('div.slide-in-section1').removeClass('slide-in-section1');
        });
    }
});

And got this log error:
Uncaught SyntaxError: missing ) after argument list on line 4

It would be more like this

$(document).scroll(function(){
    if($(document).scrollTop() >= 470) {
        $('div.slide-in-section1').effect('slide', 1000, function(){
            $('div.slide-in-section1').removeClass('slide-in-section1');
        });
    }
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.