jQuery window.scroll 向相反方向垂直移动 div

Posted 2023-05-08

【中文标题】jQuery window.scroll 向相反方向垂直移动 div

【英文标题】：jQuery window.scroll move div vertical in opposite direction

【发布时间】：2014-01-11 21:50:45

【问题描述】：

我有一个在页面滚动时向下滚动的 div，当我向上滚动时，该 div 会向上滚动。我想要相反的

这是代码：

// SCROLL BUTTON
// -- iPhone picture should scroll in when down and down when up
    jQuery(window).scroll(function()   
        jQuery(".iphonepic").stop().animate( "top": (jQuery(window).scrollTop() - 0.00) + "px", "slow"); 
    );

所以当你向下滚动时，div应该垂直向上而不是滚动方向。

小提琴演示：http://jsfiddle.net/khaleelm/sQZ9G/7/

更新

我也想限制DIV不要高于-150px，尝试

if ( parseInt(jQuery(".iphonepic").css("top"), 10) >= -150 ) 

【参考方案1】：

你可以这样做：

 top: -jQuery(window).scrollTop() + 'px' 

此外，还有一些提高效率的技巧。

您在每次滚动事件时都调用jQuery(window) 和jQuery('.iphonepic')，这真的很昂贵。做吧：

var $window = jQuery(window), $iPhonePic = jQuery('.iphonepic')

$w.on('scroll', function()

  var top = -$window.scrollTop();

  if ( top < -150 ) 
    top = -150;
  

  $iPhonePic.stop().animate(
    top: top + 'px'
  , "slow");
);

【讨论】：

我可以限制它吗？我不希望顶部高于 -150px

我会设置一个名为 top 的变量并将 -$window.scrollTop() 分配给它。如果小于这个值，则设为-150，否则保持不变。我会更新我的答案。