I want to make my picture sticky when I scroll, I'm using locomotive-scroll and VueJS.
So I want the content on the left to move but not the image on the right.
I have content before this so I I want it to be sticky when the top of the image is on the top of the page. And if it is possible to unstick it when the content disappear completely from the page.
Here's my code, HTML:
<div id="aboutMe" data-scroll-section>
<h2 data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p data-scroll data-scroll-speed="3">
This is the content of my about page, you will learn fact about me which
is kind of fun lol cause I'm so fun !!! This is the content of my about
page, you will learn fact about me which is kind of fun lol cause I'm so
fun !!! This is the content of my about page, you will learn fact about
me which is kind of fun lol cause I'm so fun !!!This is the content of my
about page, you will learn fact about me which is kind of fun lol cause I'm
so fun !!!
</p>
<img
src="../assets/pictures/cathedrale.jpg"
alt="picture of Notre Dame de Reims"
data-scroll
/>
</div>
CSS:
#aboutMe {
overflow: hidden;
display: grid;
grid-template-columns: repeat(8, 12.5vw);
grid-template-rows: repeat(12, 25vh);
margin: 0;
padding: 0;
background: #ec9ded;
color: #000;
}
.paragraph-header {
font-family: syncopate-bold;
text-transform: uppercase;
align-self: flex-end;
font-size: 65px;
letter-spacing: -2px;
margin: 0;
padding: 0;
transform: scaleY(2);
}
.content {
font-family: playfair;
font-size: 15pt;
line-height: 3.5vh;
margin: 0;
color: #000;
}
.picture {
width: 50vw;
height: 150vh;
}
.picture.top-right {
grid-column: 5 / span 4;
grid-row: 1 / span 6;
}
.paragraph-header.top-left {
grid-column: 2 / span 2;
grid-row: 2;
justify-self: start;
}
.content.top-left {
grid-column: 2 / span 2;
grid-row: 3 / span 2;
justify-self: end;
align-self: flex-end;
}
JS:
import locomotiveScroll from "locomotive-scroll";
export default {
name: "locoScroll",
data() {
return {
scrollIns: false,
};
},
mounted() {
this.$nextTick(() => {
this.initScroll();
});
},
methods: {
initScroll() {
const scroll = new locomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
smoothMobile: true,
getDirection: true,
getSpeed: true,
});
setTimeout(() => {
let target = document.getElementById("aboutMe");
scroll.scrollTo(target);
}, 5000);
},
},
};
I already try with the documentation but it doesn't work, the image was still scrolling with the page, so I need your help please. The issue could probably come from the fact that I'm using grid display but I'm not sure.
function data() {
return {
scrollIns: false,
};
}
function mounted() {
this.$nextTick(() => {
this.initScroll();
});
}
function initScroll() {
const scroll = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
smoothMobile: true,
getDirection: true,
getSpeed: true,
});
setTimeout(() => {
let target = document.getElementById("aboutMe");
scroll.scrollTo(target);
}, 5000);
}#aboutMe {
/* display: grid;
grid-template-columns: repeat(8, 12.5vw);
grid-template-rows: repeat(12, 25vh); */
margin: 0;
padding: 0;
background: #ec9ded;
color: #000;
}
#container {
height: 200vh;
width: 100%;
}
#about-cols {
display: flex;
flex-flow: row nowrap;
margin: 10% 0;
height: 100%;
}
#left {
height: 100%;
width: 50%;
}
#right {
height: 150vh;
width: 50%;
}
.picture {
height: 100%;
width: 100%;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
</head>
<body>
<div data-scroll-container>
<div id="aboutMe" data-scroll-section>
<div id="container">
<div id="about-cols" data-scroll>
<div id="left">
<h2
data-scroll
data-scroll-speed="6"
>
Hello new page
</h2>
<p data-scroll data-scroll-speed="3">
This is the content of my about page, you will learn fact about me
which is kind of fun lol cause I'm so fun !!! This is the content of
my about page, you will learn fact about me which is kind of fun lol
cause I'm so fun !!! This is the content of my about page, you
will learn fact about me which is kind of fun lol cause I'm so fun
!!!This is the content of my about page, you will learn fact about
me which is kind of fun lol cause I'm so fun !!!
</p>
</div>
<div id="right" data-scroll >
<div
data-scroll
data-scroll-sticky
data-scroll-target="#about-cols"
>
<img
src="../assets/pictures/cathedrale.jpg"
alt="picture of Notre Dame de Reims"
data-scroll
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>EDIT: I changed the snippet, I tried to copy a website that use the same thing that I want and I tried to follow the doc but that's still not working
CodePudding user response：
You can use the following rules:
position: fixed;right: 0;
function data() {
return {
scrollIns: false,
};
}
function mounted() {
this.$nextTick(() => {
this.initScroll();
});
}
function initScroll() {
const scroll = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
smoothMobile: true,
getDirection: true,
getSpeed: true,
});
setTimeout(() => {
let target = document.getElementById("aboutMe");
scroll.scrollTo(target);
}, 5000);
}html,
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
#aboutMe {
overflow: hidden;
display: grid;
grid-template-columns: repeat(8, 12.5vw);
grid-template-rows: repeat(12, 25vh);
margin: 0;
padding: 0;
background: #ec9ded;
color: #000;
}
.paragraph-header {
font-family: syncopate-bold;
text-transform: uppercase;
align-self: flex-end;
font-size: 65px;
letter-spacing: -2px;
margin: 0;
padding: 0;
transform: scaleY(2);
}
.content {
font-family: playfair;
font-size: 15pt;
line-height: 3.5vh;
margin: 0;
color: #000;
}
.picture {
width: 50vw;
height: 150vh;
}
.picture.top-right {
grid-column: 5 / span 4;
grid-row: 1 / span 6;
}
.paragraph-header.top-left {
grid-column: 2 / span 2;
grid-row: 2;
justify-self: start;
}
.content.top-left {
grid-column: 2 / span 2;
grid-row: 3 / span 2;
justify-self: end;
align-self: flex-end;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
</head>
<body>
<div data-scroll-container>
<div id="aboutMe" data-scroll-section>
<h2 data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p data-scroll data-scroll-speed="3">
This is the content of my about page, you will learn fact abour me wich
is kinda fun lol cause i'm so fun !!! This is the content of my about
page, you will learn fact abour me wich is kinda fun lol cause i'm so
fun !!! This is the content of my about page, you will learn fact abour
me wich is kinda fun lol cause i'm so fun !!!This is the content of my
about page, you will learn fact abour me wich is kinda fun lol cause i'm
so fun !!!
</p>
<img
src="../assets/pictures/cathedrale.jpg"
alt="picture of Notre Dame de Reims"
data-scroll
style="position: fixed; right: 0;"
/>
</div>
</div>
</body>
</html>CodePudding user response：
please read this post and hopefully will get the answer Locomotive-scroll how to make element fixed on scroll