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

本文介绍了jQuery window.scroll在相反方向垂直移动div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个div，它在页面滚动中向下滚动，当我向上滚动时，div向上滚动.我想要相反的情况

I have a div that scrolls down on the page scroll and when I scroll up the div scrolls up. I would like the opposite

这是代码:

// 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应该垂直向上滚动，而不是与滚动方向相同.

So when you scroll down, the div should go up vertically not the same as the scroll direction.

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

更新

我也想限制DIV不超过-150px，尝试

I also want to limit the DIV not to go higher than -150px, trying

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

推荐答案

您可以这样做:

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

此外，一些提高效率的技巧.

Also, a few tips to make it more efficient.

您每次滚动事件都调用jQuery(window)和jQuery('.iphonepic')，这确实很昂贵.只要做:

You're calling jQuery(window) and jQuery('.iphonepic') on every scroll event, that's really expensive. Just do:

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");
});

这篇关于jQuery window.scroll在相反方向垂直移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！