我想在滾動時使我的圖片變粘，我正在使用 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/[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
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>編輯：我更改了片段，我嘗試復制一個使用我想要的相同內容的網站，我嘗試關注檔案，但這仍然無法正常作業
uj5u.com熱心網友回復：
您可以使用以下規則：
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 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>uj5u.com熱心網友回復：
請閱讀這篇文章，希望能得到答案 Locomotive-scroll how to make element fixed on scroll
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/474268.html
標籤：javascript html css Vue.js 机车卷轴