Question

$(document).ready(function(){   

  $(window).scroll(function(){  

    var lScoll = $(this).scrollLeft();

    $('.logo').css({

      'transform' : 'translate(500px)'}, 5000);

  });

});

.logo是一张图片div当我向左滚动时，我想向左移动。我放弃了，并试图延迟变换。我怎么做他们中的任何一个？谢谢。这是我的HTML：

<header>   

    <div class="logo">
      <img src="img/visitLogo.png">

    </div>
  </div>

</header>

Answer 1

$(document).ready(function(){   

  $(window).scroll(function(){  

    var lScoll = $(this).scrollLeft();

    $('.logo').css({

      'transform' : 'translate(500px)'}, 5000);

  });

});

这段代码说当DOM加载后，运行一个函数，然后每当滚动窗口时，创建一个以窗口为目标的变量（this =此代码中的窗口）并运行一个scrollLeft函数（总是为0）除非你的x上有一个溢出来形成一个侧滚动条。）

为了解决这些问题，我已经改变了JS，你可以看到：

$(window).scroll(function() {
            $('.logo').css({
                        'transform': 'translateX(500px)'
            });

});

并且在CSS中，我已经将translateX设置为开始时为0（因此它是可动画的）并且我还使用易于进出的计时器将转换速度设置为0.25秒，如您所见这里：

header {
  margin: 250px auto;
  width: 80vw;
  position: relative;
}
header .logo {
  -webkit-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

请注意，我有浏览器前缀用于跨浏览器兼容性（感谢autoprefixer），我还设置了标题以具有一些基本样式，但您不需要这些，它们只是为了使示例看起来不错。

以下是我可以使用完整代码的修补程序：

Codepen with fixes and working code

如何使用Jquery向左滚动来移动css元素？

1 个答案: