Question

I’ve this function:

$(function() {
$(window).scroll(function(e) {
    var sl = $(this).scrollLeft();
    var lbl = $("#waypoints");
    if (sl > 0) {
        lbl.show('');
    }
    else {
        lbl.hide();
    }
    if (sl > 750) {
        lbl.html("<p>now passed 750</p>");
    }
    if (sl > 1000) {
        lbl.html("<p>now passed 1000</p>");
    }
});

});

Which work when i scroll the browser window. But I need to adjust it, so that it is set for a div (#main) which scrolls inside another div (.content) which has a fixed width and css overflow enabled.

I’ve tried $(#main).scroll(function(e) { no joy …

thanks for reading, any help would be awesome.

Answer 1

Try to change to class:

$(function() {
    $('.content').scroll(function(e) {
        var sl = $(this).scrollLeft();
        var lbl = $("#waypoints");
        if (sl > 0) {
            lbl.show();
        }
        else {
            lbl.hide();
        }
        if (sl > 750) {
            lbl.html("<p>now passed 750</p>");
        }
        if (sl > 1000) {
            lbl.html("<p>now passed 1000</p>");
        }
    });
});​

Here’s a JSFiddle