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

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 = window)并运行一个 scrollLeft 函数(它将始终为 0除非你在 x 上有一个溢出，形成一个侧边滚动条)。

为了解决这些问题，我已经更改了 JS，如您所见:

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

});

在 CSS 中，我一开始就将 translateX 设置为 0(这样它就可以动画了)，我还使用 ease-in-out 计时器将过渡速度设置为 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)，我还设置了 header 具有一些基本样式，但您不需要这些，它们只是为了让示例看起来不错。

这是我的修复程序，其中包含可供您使用的完整代码:

Codepen with fixes and working code