将滚动效果添加到网站

我在我的网站simmona.uchenici.bg/test/ 尝试了此代码，结果是效果不停止。当段落标题位于窗口底部时，我希望滚动效果停止，并且只有图片部分在追赶时继续。此外，我不知道为什么我的图片放大滚动...如何调试？将滚动效果添加到网站

$(document).ready(function(){ 
$(document).bind('mousewheel', function(e){ 
if(e.originalEvent.wheelDelta /680 > 0) { 
    $('#textbox').animate({ 
    'marginTop' : "+=50px" 
    }); 
} 
else { 
    $('#textbox').animate({ 
    'marginTop' : "-=10px" 
    }); 
}

}）;

$(document).bind('mousewheel', function(e){ 
if(e.originalEvent.wheelDelta /680 > 0) { 
    $('#image').animate({ 
    'marginTop' : "+=50px" 
    }); 
} 
else { 
    $('#image').animate({ 
    'marginTop' : "-=5px" 
    }); 
}`});

}）;`

来源

2017-04-23 Simona Kraseva

我注意到，我必须停止，当我到达的margin-top首节效应：-230px –

你不排队你的动画。现在发生的事情是，您向上，向下，向上滚动...但动画不会停止，而您已通过滚动提供新订单。为了解决检查.stop documentation进一步使用。

$(document).ready(function(){ 
 

 
    $(document).bind('mousewheel', function(e){ 
 

 
     if(e.originalEvent.wheelDelta/680 > 0) { 
 
      $('#textbox').stop(true, false).animate({ /* 1) applied stop(true, false)*/ 
 
       'marginTop' : "+=50px" 
 
      }, 1000, function(){}); 
 
     }else { 
 
      $('#textbox').stop(true, false).animate({ /* 2) applied stop(true, false)*/ 
 
       'marginTop' : "-=50px" 
 
      }, 1000, function(){}); 
 
     } 
 

 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="textbox"> SOME TEXT</p>

来源

2017-04-23 21:49:15 Mik

我不知道如何停止的效果。我不是在研究js，它的语法对我来说非常遥远。我也不知道为什么img会缩放到滚动条上？ :( –

看看我的回答你的代码，在开始动画之前，只需添加这部分.stop（true，false）。动画.... ////关于图像问题： 1）您正在应用margin-top ，在一个有图像的div上。 2）您使用flex，并且因为您应用margin-top，您的div将调整大小。 3）因为你使用了background-size：cover，所以你的图片会试图获得纵横比，因此看起来就像调整大小。要修复调整大小问题，您必须应用固定高度，或使用填充底部技术从[此线程]（http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a- div-with-css） – Mik

非常感谢您对图片的帮助！现在我使用你的代码，但效果错误是一样的 - 它不会停止... –

将滚动效果添加到网站

回答

相关问题