Fancy JS libraries like scrollama.js help you track which elements are visible based on scroll so that you can do things to update them.

But the basics of getting elements to stick are just done with one bit of CSS: using position: sticky and then using top/left/right/bottom to define the point (for its parent block) at which the content “sticks”.

Let’s see how that works with some standard Quarto .columns. (I’ve made also made the columns a bit wider with .column-body-outset, ’cause it looks classy.)

Moving boxes

scrollama = require("scrollama@3.1.1")
scroller = scrollama();

// initialise the library and pass event handlers to 
scroller
  .setup({
    step: ".step",
  })
  .onStepEnter((response) => {
    // the box is passed to this function so we can change it!
    console.log("Enter triggered")
    console.log(response)
    // { element, index, direction }
    response.element.classList.add("is-active");

  })
  .onStepExit((response) => {
    console.log("Exit triggered")
    console.log(response)
    // { element, index, direction }
    response.element.classList.remove("is-active");
  });

Corn?

Fitz

Demo of a sticky but unchanging column

Cool. I’m ugly, ok? Yeah. I am authorized to place you both under arrest. They stink? Yes, no. Well, at least we know where the princess is. Go on. I’m not a monster here. Princess. You know what else everyone likes? Parfait. That one, over there? That’s the moon.

I’m here until Thursday. I don’t know who you think you are. They judge me, before they even know me. Do you want to sit down? You know, I’ll make you up some tea. I’ll find us some dinner. I don’t have time for this. The princess here was just… You know I like like that. Please! I don’t want to go back there. I’ll cook all kinds of stuff for you.

Homey touches? Like what? A door. Who lives on Drury lane? Well, she’s married to the Muffin-man. Where do I sleep? Outside! Oh, a, I guess that’s cool. And I’m not going out there by myself. Oh y’know I’d really love to stay, but – Hey don’t do that. Yours for the rescuing, Princess Fiona. I can feel it. Does anyone else know where to find him? Anyone at all? Me. That’s not the point. Beast.

You’re not exactly what I’ve expected. And Duloc will finally have the perfect king! Captain! Assemble your finest man. I’m sure he’s meaner than a cow or anything, but they’re scare. Do you think maybe he’s compensating for something. You can’t breathe the word. Stop it. I’m the princess. And you’re going to tear it off…. This is one of those drop it and leave it alone things. It’s destiny.

I’ll get you out of there! Shrek! Shrek! Shrek! This is me. Maybe I could have decapitated entire village and put their heads on plate. Excellent! I’ll start the plans for tomorrow we wed… Right. Well, can I hummer? All right. Not through it. I’ve put up signs. And here they are. Oh, shut up! Next. Oh, you know what.

This whole column has position:sticky; and top:100px on it!

(You could have a figure here… or some bullet points… anything that you think is relevant to an extended section of your report, really!)

Sticky overlays

The other common style is to have some full-width content stick but only cover part of the page.

For this, we’ll need a parent to be the start/end of the sticky zone (equivalent to our .columns before). In this case, because I’ve created a heading in the next section, Quarto automatically puts it and the content below it in a <section>, so there’s no need to add another wrapper.

Tip

position:sticky
top: 0 will make it stick once the top of the section hits the top of the screen (so you won’t see content sneaking past up the top)
background-image: url(...) loads the image into it, and
background-size: cover appropriately sizes it for all screens
height: 60vh sizes it to 60% of the screen height, leaving 40% for the text underneath.
(You could set it to 100vh if you just wanted the content to be the whole
.column-screen class to make it stretch across the screen.

Wide-image

I’ll do it! Yes, but after sunset… Let’s say that a woman ‘digged’ you, but you don’t really like her, that way. I said good night! Shrek! What are you doing? I just… What’s all this about? You know, we kind of got of to a bad start yesterday and I wanted to make it up to you. You’re not exactly what I’ve expected. Well, yes, actually. Forget it. Sorry lady there’s no time. Take a look at me! What am I? A… A ballad, a sonnet, a libretto.

Princess. Smelly Ogre. The wedding! We’ll never make it in time! Never fear! For where there is a will, there is a way. There he is and there’s the group of hunters running away from his stag. This is all my fault. And that’s where you say: “I object”. Like I hate it when you got somebody in your face. Please welcome… Oh, you can’t tell me you’re afraid of heights. No, I’m just a little uncomfortable of being on a rickety bridge over boiling lake of lava! Come on donkey, I’m right here beside you.

Reuse

CC BY 4.0