Search code examples
javascripthtmlcssvue.jslocomotive-scroll

How can I make the picture sticky on scroll locomotive

I want to make my picture sticky when I scroll, I'm using locomotive-scroll and VueJS.

The image that should be sticky 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 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);
    },
  },
};

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

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

Solution

  • 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 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>