Question

I have a header. Below that header I have a wrapper containing 2 divs positioned side by side. I would like to have the right div being animated when the wrapper it belongs to (#wrapper) start “disappearing” at the top of the page. I tried $(window).scroll but the problem is that the animation starts even if the wrapper has not starting to disappear at the top. I hope I explained my problem clearly. Thank you in advance for your replies. Cheers. Marc.

My HTML :

    <div id="header"></div>
    <div id="wrapper">
        <div id="contentWrapper">
            <div id="contentOne" class="content">This is contentOne</div>
            <div id="contentTwo" class="content">This is contentTwo</div>
            <div id="contentThree" class="content">This is contentThree</div>
            <div id="contentFour" class="content">This is contentFour</div>
        </div>
    </div>

My CSS:

#header{
    width:960px;
    height:300px;
    background-color:rgba(1,1,1,0.3);
    margin:5px auto;}

#wrapper{
    width:960px;
    height:auto;
    margin:0 auto;
    background-color:rgba(238,221,130,0.6);
    border:5px solid purple;
    overflow:hidden;}

#contentWrapper{
    width:1910px;
    height:auto;
    background-color:rgba(70,130,180,0.4);
    float:left;
    position:relative;}

.content{
    width:465px;
    height:auto;
    margin:10px 0 10px 10px;
    padding:0;
    background-color:rgba(205,92,92,0.4);
    float:left;}

#contentOne{
    height:2000px;}

My JS :

$(window).scroll(function() {
    $("#contentTwo").stop().animate({
        "marginTop": ($(window).scrollTop() + 10) + "px"
    }, "fast");
});

Answer 1

You have to account for the position of the wrapper as well as the scroll on the window.

http://jsfiddle.net/eqXMC/

Modified JS using your example code:

$(window).scroll(function() {

    var newMarginTop = Math.max(0, $(window).scrollTop() - $('#contentWrapper').offset().top) + 10;

    $("#contentTwo").stop().animate({
        "marginTop": newMarginTop + "px"
    }, "fast");
});