Jquery animate div, когда его оболочка начинает «исчезать» сверху - PullRequest
Новая
       6

Jquery animate div, когда его оболочка начинает «исчезать» сверху

0 голосов
/ 25 января 2012

У меня есть заголовок. Ниже этого заголовка у меня есть обертка, содержащая 2 элемента div, расположенных рядом. Я хотел бы, чтобы правый div анимировался, когда оболочка, к которой он принадлежит (#wrapper), начала «исчезать» в верхней части страницы. Я пробовал $ (window) .scroll, но проблема в том, что анимация запускается, даже если обертка не начинает исчезать сверху. Надеюсь, я четко объяснил свою проблему. Заранее благодарю за ваши ответы. Приветствия. Марк.

Мой 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>

Мой 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;}

Мой JS: 

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

1 Ответ

1 голос
/ 25 января 2012

Вы должны учесть положение оболочки и прокрутку в окне.

http://jsfiddle.net/eqXMC/

Модифицированный JS, используя ваш пример кода: 

$(window).scroll(function() {

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

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