What is the best way to create a sticky image that stays in place while scrolling using locom

I am trying to create a sticky image while scrolling using locomotive-scroll and VueJS.

https://i.sstatic.net/mMvI2.jpg I want the content on the left to move, but not the image on the right.

My goal is to make the image stick when its top reaches the top of the page and unstick it when the content disappears completely from view.

Below is my HTML code:

<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 facts about me which
    are quite fun because I'm so interesting! This is the content of my about
    page, you will learn facts about me which are kind of amusing because I'm so
    entertaining! 
  </p>
  <img
    src="../assets/pictures/cathedrale.jpg"
    alt="picture of Notre Dame de Reims"
    class="picture top-right"
    data-scroll
  />
</div>

CSS:

JavaScript:

I have followed the documentation but the image is still scrolling with the page. I suspect the issue may be due to the grid display I am using, but I'm not entirely sure.

Any help would be greatly appreciated. Thank you!

Answer №1

Try implementing the following guidelines:

  • 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e02010d0103011a07180b431d0d1c0102022e5a405f405a">[email protected]</a>/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">
        Welcome to my profile
      </h2>
      <p class="content top-left" data-scroll data-scroll-speed="3">
        This section provides insights about me which are entertaining as I have a vibrant personality! Get ready for some fun facts and engaging content. This is your chance to get to know me better in an exciting way!
      </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The children of the <Grid item> component in material-ui are overlapping the parent because they have a width of 100%

One issue I'm facing is that when I have children with full width in a Grid item, they end up overlapping to the right side of their parent. To illustrate this problem, here's the code: https://codesandbox.io/s/rn88r5jmn import React, { Compo ...

Scroll the div until it reaches the top of the page, then make it fixed in place

Let's dive right in: The code I am working with is as follows: <div id="keep_up"> <div id="thread_menu"> <div id="new_thread"> </div> </div> </div> And here is my CSS: #keep_up { po ...

Unable to apply nativeElement.style.width property within ngOnChanges lifecycle method

My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it. @Input('connections') public connections = []; @ViewChildren('containers', { read: Elemen ...

What is the process for incorporating a unique Mongo expression into a JSON object?

I'm currently trying to figure out how to add a specific Mongo command to my JSON object. Normally, adding regular strings or objects is straightforward, but I'm struggling with this particular command: $set : { "author" : req.body.name } Simpl ...

Transferring checkbox status from HTML (JavaScript) to PHP

I am a beginner in JavaScript and I am trying to get the value from a variable in JS, send it via post (or ajax) to a PHP file, and display the text. However, I have attempted various methods but always encounter an undefined index error in PHP. Below is ...

Ways to determine the total number of npm packages installed, excluding development dependencies

Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...

What is the best way to hide a section of an image using the background of a different div?

How can I make the background of div2 cover the image in div1 when setting margin-top=-50px? Code snippet: <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> ...

Mysterious line break emerges upon displaying JavaScript through PHP

I have a situation where I am using PHP to output JavaScript for a WordPress shortcode. This is what my PHP code looks like: $output="<script type='text/javascript' > jQuery(document).ready(function() { jQuery('#photo{$photo_id}&a ...

There is an issue with Nuxt 3 layers not functioning properly when trying to access a project page from a different

Is there a way to make a project function independently while still being accessible through layers and able to run smoothly? The current project structure is as follows: ...

In Angular-Cli, the variables @Input and @Output are consistently null until they are assigned

Individuals' internal values are printed without any problems, but those obtained using @Input or @Output are not being displayed. child.component.ts @Component({ selector: 'app-form-input', templateUrl: './form-input.component.ht ...

"The value of a variable in jQuery's 'animate' function can be dynamically adjusted

Looking to smoothly animate a variable using jquery. For example: Starting with a variable value of 1, we want it to reach 10 after 5 seconds. The transition should be smooth and increase gradually. I hope this clarifies what I am trying to achieve. Tha ...

What could be causing req.files to be empty in Multer for Node.js?

It seems that there is an issue with multer not receiving a value from the form: //Set Storage Engine var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '/uploads') }, filename: function (req, file, cb ...

Why is the alignment of my page titles off?

In my admin component, I have a menu and a header. https://i.sstatic.net/oGJMR.png However, when I create a new page like the currency page, the title appears at the bottom instead of the top. Why is that? I believe there might be an issue with the admi ...

Unlocking the Potential: Employing postMessage in an iFrame to Seamlessly Navigate Users towards an Enriching Destination on

One of my webpages includes an iframe. Here's the challenge: I want a button within the frame to redirect users to another page without reloading the iframe's content. Instead, I want the URL of the main window to change. Unfortunately, I haven& ...

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

Using the API "https://jsonplaceholder.typicode.com/photos", I have access to 5 properties: albumId: 1 id: 1 thumbnailUrl: "https://via.placeholder.com/150/92c952" title: "accusamus beatae ad facilis cum similique qui sunt" url: "https://via.placeh ...

What is the correct way to dynamically switch between RTL and LTR in React with Material UI?

I recently learned that in order to support right-to-left (RTL) languages with Material UI, you need to follow these steps. I have a select input that allows users to switch between languages, changing the overall direction of the app. The core of my appl ...

Synchronizing timers among different elements

Just a little context: I'm diving into the world of React and currently working on a small app using next.js (with a template from a tutorial I followed some time ago). Lately, I've encountered a challenge where I need to synchronize a timer betw ...

Mobile Navigation Menu Appears and Disappears When Media Query Shrinks

Whenever I shrink the page, the menu quickly pops up and then slides back down. I would prefer it not to show up at all when the page shrinks. I can't figure out why this issue is occurring. I suspect that the problem lies with transitions on #nav ra ...

Creating interactive maps with dynamically added area tags using JavaScript

I am looking to dynamically load an image and add a map tag to it. The coordinates of different areas (such as circle coordinates) are coming from a database and I need to add those areas to the map tag dynamically using JavaScript or jQuery in a loop. I ...

"Utilizing Angular's ng-repeat to house multiple select dropdown

I'm dealing with a scenario like this: <span ng-repeat="personNum in unit.PricePerson"> {{personNum}} <select ng-model="personNum" ng-options="o as o for o in unit.PricePerson track by $index"></select> & ...