Main locomotive javascript
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css>">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js>"></script>
<script>
const locoScroll = new LocomotiveScroll({
el: document.querySelector(".locomotive-scroll"),
smooth: true,
multiplier: 1.0,
});
// Wait 2 seconds then calculate the new page height
setTimeout(() => {
locoScroll.update();
}, 2000);
</script>
Or use the version below to keep all Locomotive interactions on mobile
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css>">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/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,
});
// Wait 2 seconds then calculate the new page height
setTimeout(() => {
locoScroll.update();
}, 2000);
</script>
Optional code for allowing anchor links
<script>
// Optional Script for Anchor Links
$('.nav__link.is--first').on('click', function() {
const slider = document.querySelector('#about');
locoScroll.scrollTo(slider)
});
$('.nav__link.is--second').on('click', function() {
const slider = document.querySelector('#sticky2');
locoScroll.scrollTo(slider)
});
$('.nav__link.is--third').on('click', function() {
const slider = document.querySelector('#photos');
locoScroll.scrollTo(slider)
});
</script>
Optional CSS to prevent elements from temporarily disappearing when scrolling back up
<style>
html.has-scroll-smooth {
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
Add and remove class from nav based on if locomotive is scrolled down at all
<script>
// Scroll Navbar
locoScroll.on('scroll', (args) => {
// Get all current elements : args.currentElements
if(typeof args.currentElements['scroll-trigger'] === 'object') {
$('.nav').removeClass('is--filled');
} else {
$('.nav').addClass('is--filled');
}
});
</script>