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