Disable the vertical displacement of the page on scroll down after some specified vertical position

Question

I want to disable the vertical movement of the webpage during the scroll down action and simply trigger an animation for it.
Also I wanto make sure that this is getting disabled only after passing some specified vertical position. These are the 2 sections in my page.

 <section id="3" class="window">
        <div class="content">

            <button id="slide">slide</button>
           <img height="700" src="/home/varun/Documents/Crown/images/line.png" id="2guns" style="position:relative; left:1293px;                                                                                                                                 bottom: 50px;">
        </div>
    </section>
    <section id="4" class="window">
    <div class="content">
        </div>
    </section>

And this is the Jquery I have given to the sectio:id:3

 $(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test =2000;             

if(y_scroll_pos > scroll_pos_test) {
    $('#2guns'&&'#3').animate({left: -14600},7000);
}
});

Here,the section:id:3 starts at 2000px.
Now the question is, on scrolling down past the 2000, I want to disable the vertical displacement of the page.

Are you looking for this:- http://stackoverflow.com/questions/6625950/disabling-vertical-scroll-by-mouse?rq=1 (Duplicate Post)??? — UID, Sep 12 '13 at 19:38

score 0 · Answer 1 · answered Sep 12 '13 at 21:01

When the user scrolls past 2000, give section#3 position: fixed so it will follow the browser window. With JS, make the element tall enough to cover the whole viewport. The user will be able to scroll, but they won't see anything different. When the user scrolls back up above 2000, change the position back from fixed to static.

To set the position of section#3 to fixed:

$('#3').css('position', 'fixed'})

To make the element as tall as the browser window:

$('#3').height($(window).height())

I added the above. But when scrolling it goes to section#4 and also the automatic trigger f the jquery animation also got disabled somehow. — Varun, Sep 12 '13 at 21:10

Disable the vertical displacement of the page on scroll down after some specified vertical position

1 Answers1