4

This is the rough structure of my website:

<header>
<section1>
<section2>
<section3>
<footer>

I'm using a ScrollMagic scene to pin my header until section2 gets to the top of the window.
To achieve that I set the duration of the scene to the header's height + section1 height.

The problem is that ScrollMagic creates a div element around my header with a padding-bottom of exactly that duration.
But I don't want that padding. I would like the header to be right on top of section1 and once I start scrolling to act as if it was fixed - but only until I get to section 2. At the moment section 2 gets to the top of the window (minus the header height) I want the scene to end and the header to scroll out.

In fact everything works as it should when I set the duration to 0. But obviously that also lets my header stay there the whole time and not disappear once I get to section2.

I hope that was understandable.

Here is my code: 

var controller = new ScrollMagic.Controller();

var headerscroll = $("#header").height() + $("#section1").height() ;

var headerScene = new ScrollMagic.Scene({
  pushFollowers: false,
  duration: headerscroll,
  offset: 30
})
.setPin("#header");

controller.addScene([
  headerScene
]);
sam
  • 1,711
  • 1
  • 17
  • 24

1 Answers1

9

What you're describing is the default Pinning behavior of ScrollMagic, because usually people don't want the pinned element to "overlap" the elements following it in the DOM.

But if you check the documentation for setPin you'll find, that you can use the option pushFollowers to disable this behavior and create the effect you're looking for.

In your case this means to add the pin like this:

.setPin("#header", {pushFollowers: false});

Also note, that there are two scenarios in which pushFollowers is disabled by default:

  1. The Scene's duration is 0. If it is, there's obviously no point in pushing down following elements, as the scene never ends.
  2. The element that is supposed to be pinned has a css attribute of position: absolute. In this case it also wouldn't effect the DOM flow of following objects and pushFollowers is automatically disabled.

For future support also check out the troubleshooting guide and the github issues section.

Hope that helps. :)

Jan Paepke
  • 1,997
  • 15
  • 25
  • 1
    Awesome! Thank you! I did try to follow the troubleshooting guide and other resources but couldn't find any solution to my problem. As you can see in the code I posted above, I simply had the "pushFollowers: false" in the wrong spot. I had it inside the scene instead ot the setPin. – sam Mar 27 '15 at 13:27
  • I also had pushFollowers in the wrong place! Must not be documented super well, as I was searching the docs and also Google for a while!! – 00-BBB Oct 08 '20 at 15:47