CODEWITHSUNDEEP
jqueryscrollresizemousewheel
user366006
user366006

Reputation:

Disable scrolling up after certain point on page?

I have an intro div on a page that calculates the window height so it fills the window:

resizeWindow();
$(window).resize(resizeWindow);

function resizeWindow() {
    var ww = $(window).width();
    var bh = $(document).height();
    var wh = $(window).height();
    featureHeight = wh - 0;
    $('#intro').css({'height':featureHeight+'px'});
}

I'd like to set it so once the user scrolls past this div, scrolling back up to that intro div is disabled.

Is this possible? Any help would be greatly appreciated.

Update:

Combined the function found here and this does the trick: 

resizeWindow();
$(window).resize(resizeWindow);

function resizeWindow() {
    var ww = $(window).width();
    var bh = $(document).height();
    var wh = $(window).height();
    featureHeight = wh - 0;
    $('#intro').css({'height':featureHeight+'px'});
    var scrollPoint = featureHeight;
    var scrolledPast = false;
    $(window).scroll(function() {
        $(window).scrollTop() > scrollPoint ? scrolledPast = true : '';
        $(window).scrollTop() < scrollPoint && scrolledPast == true ? $(window).scrollTop(scrollPoint) : '';
    }).scroll();
}

Upvotes: 0

Views: 3033

Answers (2)

user366006
user366006

Reputation:

Combined the function found here and this does the trick:

resizeWindow();
$(window).resize(resizeWindow);

function resizeWindow() {
    var ww = $(window).width();
    var bh = $(document).height();
    var wh = $(window).height();
    featureHeight = wh - 0;
    $('#intro').css({'height':featureHeight+'px'});
    var scrollPoint = featureHeight;
    var scrolledPast = false;
    $(window).scroll(function() {
        $(window).scrollTop() > scrollPoint ? scrolledPast = true : '';
        $(window).scrollTop() < scrollPoint && scrolledPast == true ? $(window).scrollTop(scrollPoint) : '';
    }).scroll();
}

Upvotes: 1

stylishCoder
stylishCoder

Reputation: 385

First, give your div an ID -- for example dvid, and suppose the other div (which you want to detect scrolling after) has an ID otherdiv. Then you can do something like this:

$(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
             //reached the desired point -- validate here or whatever you want
        }
    });
});

Upvotes: 0

Related Questions