Scrolling child Section from a section to another

I have 3 sections (first, second and Third), inside the "first" section I have another section called "contenidor_composicio". What I wanna do is to make "contenidor_composicio" an Scrolling section. So I would like to move it like "fixed" but alway from a section to another, with a simple mouse scroll ( I put 50px). For example If I'm on the "first" section, I don't wanna be scrolling down till the "second". I'd like to go directly from the 1rst to the 2nd.

<section id="first">
    <section id="contenidor_composicio"></section>
</section>
<section id="second"></section>
<section id="third"></section>

See it on the example there : http://jsfiddle.net/blackersoul/LATDj/

Thanks

Solution

I believe this should accomplish what you want.

First, update your CSS so that the position of contenidor_composicio is relative.

#contenidor_composicio {
    background-color: black;
    height: 400px;
    width: 70%;
    margin: auto;
    position:relative;
}

And now, we need to fix the jQuery/JavaScript...

First, we need to add a flag to determine whether the scrolling was caused by the user moving the scrollbar or by the script changing the scroll position. Then, in the conditional where you're checking for the scroll difference to be greater than the minPx value, add in that our new flag has to be false.

Next, we need to change our conditional. Instead of checking to see if the currentScroll position is equal to the firstPosition, we want to check and see if the previousScroll position is equal.

Next, let's move the $(window).scrollTop(position) out of your animation sequence. I'm not sure that they return a value, so let's scroll then animate.

Change the css property we're animating to top instead of marginTop now that we've made its position relative.

We also need to add on "px" to the value of the CSS property.

Okay, so the setting the new scroll position and animation should now be working properly. Let's set the currentScroll equal to the new position we just scrolled to.

Then set the jumped flag to true since the script caused the scrolling, and not the user.

Wash, rinse, repeat for each conditional.

Now, we'll add an else statement to our difference and jumped test to set the flag to false so it's ready for the next scroll (which can only be performed by the user).

Last, we want to move the setting of previousScroll = currentScroll inside the conditional. This fixes it to where if we scroll more than minPx away from one of the three positions, it triggers the scrolling scripts. Otherwise, if we slowly scrolled down the page less than mixPx at a time, we'd never trigger the scrolling scripts.

$(function () {


    /**********************     REDIMENCIÓ DE LES SECCIONS FIRST & SECOND & THIRD    *************************/

    var alcada = $(window).height();
    alcada = parseInt(alcada, 10);
    $('#first').height(alcada);
    $('#second').height(alcada);
    $('#third').height(alcada);

    /*********************************** SCROLLING to a SECTION *************************/
    var $scrollingDiv = $("#contenidor_composicio");

    /* Get the position of each Section */
    var previousScroll = 0;
    var firstPosition = $('#first').offset().top;
    var secondPosition = $('#second').offset().top;
    var thirdPosition = $('#third').offset().top;

    var minPx = 50; /***** Min px to move to next/previous step *********/

    var jumped = false; //indicates whether scrolling was due to user or to scrip

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        var difference = Math.abs(currentScroll - previousScroll);
        if ((difference >= minPx) && !jumped) {
            if (currentScroll > previousScroll && previousScroll == firstPosition) /******** 1rst step  */
            {
                //            alert('down 1-->2');
                $(window).scrollTop(secondPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (secondPosition + "px")
                }, "slow");
                currentScroll = secondPosition;
                jumped = true; //script caused scrolling
            } else if (currentScroll > previousScroll && previousScroll == secondPosition) /*********** 2nd Step *******/
            {
                //            alert('down 2-->3');
                $(window).scrollTop(thirdPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (thirdPosition + "px")
                }, "slow");
                currentScroll = thirdPosition;
                jumped = true; //script caused scrolling
            } else if (currentScroll < previousScroll && previousScroll == secondPosition) /*********** 2nd Step *******/
            {
                //               alert('go from  2-->1');
                $(window).scrollTop(firstPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (firstPosition + "px")
                }, "slow");
                currentScroll = firstPosition;
                jumped = true; //script caused scrolling
            } else {
                //               alert('down 3-->2');
                $(window).scrollTop(secondPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (secondPosition + "px")
                }, "slow");
                currentScroll = secondPosition;
                jumped = true; //script caused scrolling
            }
            previousScroll = currentScroll;
        } else {
            jumped = false; 
        }
    });
});