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

Posted 2023-03-06

【中文标题】如何使用机车库禁用智能手机上的粘性元素？

【英文标题】：How to disable a sticky element on smartphones using locomotive library?

【发布时间】：2021-11-15 04:20:42

【问题描述】：

我有一个关于 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 具有以下属性：attributes

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

亲切的问候， 杰伦

【参考方案1】：

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

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


const locoScroll = new LocomotiveScroll(