Question

我需要阻止#first和#second div越过绿线。这个例子将向您解释一切。

当我向上滚动时它会很好用，但是当我下去时，DIV正在跳跃。

HTML

<div id="first"></div>
<div id="second"></div>
<div id="donotcross"></div>

CSS

#donotcross {
    position: relative;
    width 500px;
    height: 5px;
    top: 487px;
    background: green;
}

#first {
    position: fixed;
    width: 50px;
    height: 50px;
    background: red;
    right: 20px;
    bottom: 50%;
    margin-bottom: 50px;
}

#second {
    position: fixed;
    width: 50px;
    height: 50px;
    background: yellow;
    right: 20px;
    bottom: 50%;
    margin-bottom: -50px;
}

的jQuery

$(window).scroll(function () {
    windowPos = $(this).scrollTop();
    asd = $('#first').offset().top;
    tauto = 500 - windowPos;
     if(asd <= 500) { 
       $('#first').css('top', tauto);
       $('#second').css('top', 600 - windowPos);
   } 
   if (asd > 500 ){
       $('#first').css('top', 'auto');
       $('#second').css('top', 'auto');
   }
});

Answer 1

您需要检查windowPos变量，而不是检查asd > 500。跳跃是由于你将盒子移动到500以上而引起的。所以为了避免跳跃，你可能想要这样做

$(window).scroll(function () {
    windowPos = $(this).scrollTop();
    asd = $('#first').offset().top;
    tauto = 500 - windowPos;
     if(asd <= 500) { 
       $('#first').css('top', tauto);
       $('#second').css('top', 600 - windowPos);
   } 
   if (windowPos > 500 ){
       $('#first').css('top', 'auto');
       $('#second').css('top', 'auto');
   }
});

编辑：

为了达到粘滞效果，我手动计算了盒子的位置，而不是使用top：auto

    $(window).scroll(function () {

    var center = $(window).height() / 2;
    //the 50 is the the #first and #second offset diff divide by 2
    var firstBoxTop = center - 50;
    var secondBoxTop = center + 50;

    var windowPos = $(this).scrollTop();
    if((windowPos + firstBoxTop) < 500)  { 
        firstBoxTop = 500 - windowPos; 
    }
    if((windowPos + secondBoxTop) < 600) { 
        secondBoxTop = 600 - windowPos; 
    }
    $('#first').css('top', firstBoxTop);
    $('#second').css('top', secondBoxTop);
});

Answer 2

如果你把所有内容放在一个包装器div中，它会非常有效。

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>
<div id="donotcross"></div>

<强> CSS

body {
    height: 2000px;
}

#donotcross {
    position: relative;
    width 500px;
    height: 5px;
    top: 487px;
    background: green;
}

#wrapper {
    position: fixed;
    width: 70px;
    height: 130px;
    background: gray;
    right: 20px;
    text-align: center;
    top: 50%;
}

#first {
    background: red;
    width: 50px;
    height: 50px;
    margin: 10px auto;
}

#second {
    background: yellow;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

此脚本适用于height的任何top和#wrapper值（可能是动态的），以及#donotcross的任何高度和位置（也可能是动态的））。

    var start_p = $('#wrapper').offset().top - $('#wrapper').height()/2;
    $('#wrapper').css('top', $('#donotcross').offset().top + $('#donotcross').height());

    $(window).scroll(function () {
        var windowPos = $(this).scrollTop();
        var dnc = $('#donotcross').offset().top + $('#donotcross').height() - windowPos;
        if (start_p >= dnc) $('#wrapper').css('top', start_p);
        else $('#wrapper').css('top', dnc);
    });

http://jsfiddle.net/3QdJt/3/

阻止DIV越过指定位置

2 个答案: