javascript - 如何使用机车库禁用智能手机上的粘性元素？

Question

我有一个关于 javascript 的问题。（我是新手）。我在 Webflow 项目中使用机车平滑滚动库。因为 Webflow 交互往往不能很好地与 locomotive 结合使用，所以我使用 locomotive 提供的功能来创建一个粘性元素。在移动设备上，我想禁用粘性效果。这是机车代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>
<script>
const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".locomotive-scroll"),
  smooth: true,
  smartphone: {
      smooth: true
  },
  tablet: {
      smooth: true
  },
    smoothMobile: 1,
  multiplier: 1.0,
}); 
</script>

粘滞元素的父 div 分配了一个名为 #sticky1 的 ID。粘在视口顶部的 div 具有以下属性：

如何在移动设备上消除粘性效果？希望我的问题有意义！

亲切的问候，杰伦

标签： javascriptcssmedia-queriestargetwebflow

Answer 1

在初始化机车之前，您可以简单地使用 javascript 从 div 中删除 data-scroll-sticky 属性，例如：

if(isMobile) {
      element.removeAttribute(data-scroll-sticky);
      element.removeAttribute(data-scroll-target);
}

const locoScroll = new LocomotiveScroll({