我怎样才能使图片粘在滚动机车上
How can I make the picture sticky on scroll locomotive
我想在滚动时让我的图片具有粘性，我正在使用 locomotive-scroll 和 VueJS。
所以我想移动左边的内容而不是右边的图像。
我之前有内容，所以我希望它在图像顶部位于页面顶部时保持粘性。
并且当内容从页面上完全消失时是否可以取消粘贴。
这是我的代码，HTML:
<div id="aboutMe" data-scroll-section>
<h2 class="paragraph-header top-left" data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
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);
},
},
};
我已经尝试使用文档，但它不起作用，图像仍在页面上滚动，所以我需要你的帮助。
这个问题可能是因为我使用的是网格显示，但我不确定。
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/locomotive-scroll@4.1.4/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
class="paragraph-header top-left"
data-scroll
data-scroll-speed="6"
>
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
data-scroll
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
编辑：我更改了代码片段，我尝试复制一个使用我想要的相同内容的网站，我尝试按照文档进行操作，但仍然无法正常工作
请阅读这篇文章post，希望能得到答案
Locomotive-scroll how to make element fixed on scroll
您可以使用以下规则：
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/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
</head>
<body>
<div data-scroll-container>
<div id="aboutMe" data-scroll-section>
<h2 class="paragraph-header top-left" data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
data-scroll
style="position: fixed; right: 0;"
/>
</div>
</div>
</body>
</html>
我想在滚动时让我的图片具有粘性，我正在使用 locomotive-scroll 和 VueJS。
我之前有内容，所以我希望它在图像顶部位于页面顶部时保持粘性。 并且当内容从页面上完全消失时是否可以取消粘贴。
这是我的代码，HTML:
<div id="aboutMe" data-scroll-section>
<h2 class="paragraph-header top-left" data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
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);
},
},
};
我已经尝试使用文档，但它不起作用，图像仍在页面上滚动，所以我需要你的帮助。 这个问题可能是因为我使用的是网格显示，但我不确定。
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/locomotive-scroll@4.1.4/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
class="paragraph-header top-left"
data-scroll
data-scroll-speed="6"
>
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
data-scroll
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
编辑：我更改了代码片段，我尝试复制一个使用我想要的相同内容的网站，我尝试按照文档进行操作，但仍然无法正常工作
请阅读这篇文章post，希望能得到答案 Locomotive-scroll how to make element fixed on scroll
您可以使用以下规则：
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/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
</head>
<body>
<div data-scroll-container>
<div id="aboutMe" data-scroll-section>
<h2 class="paragraph-header top-left" data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p class="content top-left" 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"
class="picture top-right"
data-scroll
style="position: fixed; right: 0;"
/>
</div>
</div>
</body>
</html>