How to disable a sticky element on smartphones using locomotive library?

user_16967146 0
Viewed 387

I have a question regarding javascript.(I'm new). I'm using the locomotive smooth scroll library in a Webflow project. Because Webflow interactions tend to not work very well in combination with locomotive, I've used the functionality provided by locomotive to create a sticky element. On mobile I want to disable the sticky effect. This is the locomotive code:

<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>

The parent div of the sticky element has an ID assigned called #sticky1 The div that sticks to the top of the viewport has the following attributes: attributes

How do I make it so that on mobile, the sticky effect is removed? Hope my question makes sense!

Kind regards, Jeroen

webflow media-queries target css javascript
1 Answers

You can simply use javascript to remove the data-scroll-sticky attribute from your div BEFORE you initialize locomotive for example:

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

const locoScroll = new LocomotiveScroll({
user_173860880
Related