I'm trying to build a static but responsive storytelling HTML website. My goal is to achieve something likes this:

Text on the left, *.jpg image with a fixed position on the right. As a user scrolls the text on the left side, the image on the right side remains fixed in position but changes to another *.jpg image with a short transition, after the scrolling on the left side has reached a certain point.

Responsive in this case would means that I'm pletely satisfied with the sticky scrolling being inactive on smaller screens and the text and image block simply returning to their normal breakpoint behaviour.

I have looked into various Storytelling and scrolling JavaScript libraries (Scrollstory, Waypoints and InView) to achieve this goal simply, lightweight and easy. All of them (so far) seem pletely overengineered for what I'm trying to do.

The barely available tutorials and code snippets make me feel a little bit like this:

I find no real reference that tells me how to get started with small steps to build a scroller in the first place. Regardless of the library.

Reference files of the individual libraries (that have accessible code) are often outdated and focus on working with external data visualization frameworks and require loading up to four other external scripts for whatever reason and still provide no responsive functionality.

I've tried to rebuild this showcase example here: / because it is at least half of what I want to achieve, but I couldn't get it to work and I don't understand the excessive use of JavaScript there either: /

  <article>
<div class='step' data-step='1'>
  <p>STEP 1</p>
</div>
<div class='step' data-step='2'>
  <p>STEP 2</p>
</div>
<div class='step' data-step='3'>
  <p>STEP 3</p>
</div>
<div class='step' data-step='4'>
  <p>STEP 4</p>
</div>

The code looks easy enough on the HTML side and makes sense to me on almost all libraries, but I get pletely lost when it es to the JavsScript part. Why do I need D3 here? Why so much JS functionalities for a simple change on scroll?

Am I pletely wrong in my belief that there is a minimalist way to achieve such a rather simple sticky scrolling without involving multiple different external scripts and libraries?

Can someone point me in a good direction to build a scroller step by step that allows me to understand each part of the code that get's in and not under the involvement of plex external libraries and tutorials that seem to have no real beginning and no end?

I'm trying to build a static but responsive storytelling HTML website. My goal is to achieve something likes this:

Text on the left, *.jpg image with a fixed position on the right. As a user scrolls the text on the left side, the image on the right side remains fixed in position but changes to another *.jpg image with a short transition, after the scrolling on the left side has reached a certain point.

Responsive in this case would means that I'm pletely satisfied with the sticky scrolling being inactive on smaller screens and the text and image block simply returning to their normal breakpoint behaviour.

I have looked into various Storytelling and scrolling JavaScript libraries (Scrollstory, Waypoints and InView) to achieve this goal simply, lightweight and easy. All of them (so far) seem pletely overengineered for what I'm trying to do.

The barely available tutorials and code snippets make me feel a little bit like this:

I find no real reference that tells me how to get started with small steps to build a scroller in the first place. Regardless of the library.

Reference files of the individual libraries (that have accessible code) are often outdated and focus on working with external data visualization frameworks and require loading up to four other external scripts for whatever reason and still provide no responsive functionality.

I've tried to rebuild this showcase example here: https://russellgoldenberg.github.io/scrollama/sticky-side/ because it is at least half of what I want to achieve, but I couldn't get it to work and I don't understand the excessive use of JavaScript there either: https://jsfiddle/gdkupcb6/2/

  <article>
<div class='step' data-step='1'>
  <p>STEP 1</p>
</div>
<div class='step' data-step='2'>
  <p>STEP 2</p>
</div>
<div class='step' data-step='3'>
  <p>STEP 3</p>
</div>
<div class='step' data-step='4'>
  <p>STEP 4</p>
</div>

The code looks easy enough on the HTML side and makes sense to me on almost all libraries, but I get pletely lost when it es to the JavsScript part. Why do I need D3 here? Why so much JS functionalities for a simple change on scroll?

Am I pletely wrong in my belief that there is a minimalist way to achieve such a rather simple sticky scrolling without involving multiple different external scripts and libraries?

Can someone point me in a good direction to build a scroller step by step that allows me to understand each part of the code that get's in and not under the involvement of plex external libraries and tutorials that seem to have no real beginning and no end?

• javascript
• html
• css
• scrollbar

2 Answers 2

For this you can use JavaScript - you add a window.addEventListener("wheel") or "scroll" and listen when your "picture".offsetTop gets to the right scroll position and turn position to of this element to "fixed". Also, you can optionally add a "slow motion in" effect or just play with how image scrolls with the page.

Your jsFiddle didnt work for me, but I like the idea so I plugged a little 30 lines of code ---DEMO--- on codepen for a similar purpose of this idea, its a little clunky will gladly take any advice from others, but it works. Atm it scrolls the image with your page seemingly changing images when chunks of text start and finish (I use emojies instead of images, but the idea is the same).

It should automatically scale to your screen sizes while still working, but it's untested so ..:D

var container = document.getElementById("container");
var stickyImage = document.getElementById("stickyImage");
var tempY;
window.addEventListener("scroll", (e) => {
//watch how image moves with scrolleing
    if(window.pageYOffset >= container.offsetTop && window.pageYOffset <= container.offsetTop+container.offsetHeight  - window.innerHeight ){
        console.log("slinding");
        stickyImage.style.position = "fixed";
        stickyImage.style.top = "0vh";
        stickyImage.style.marginTop = "";
        tempY = window.pageYOffset;
    }else if(window.pageYOffset <= container.offsetTop){
        console.log("top sxcreen");
        stickyImage.style.position = "absolute";
        stickyImage.style.top = "";
        stickyImage.style.marginTop = "";       
    }else{
        console.log("stop");
        stickyImage.style.position = "absolute";
        stickyImage.style.marginTop = tempY + "px";         
    }
//change images while scroll
    if(window.pageYOffset < document.getElementById("change1").offsetTop){
        stickyImage.textContent = "