Stick elements to other elements with Scrollmagic and setPin?!

[nicmare 1 Likes (Newbie)]

I try to achieve something like this: http://www.headcase.ch/

When you scroll the page, you will notice how the menu bar will stick to the window top.

 

Now i need this in my recent project too but with an offset: http://tvim.de/yachtclub  (pw: user)

 

the blue bar should stick to the fixed header as soon as it "touches" the bottom edge like this:

 

 

 

as you see the trigger is always in the middle of the viewport.

This is my code:

var controller = new ScrollMagic.Controller();
        var introTl = new TimelineLite();

        introTl
            .to(logoimg, 1, {width: 100, autoRound:false})
            .to(sticked, 1, {backgroundColor: "white"}, '-=1')
            .to($("#nav > ul > li > a").not("#nav > ul > li.current_page_item > a"), 1, {color: "black"}, '-=1')
        ;

        var introScene = new ScrollMagic.Scene({duration: 200}).setTween(introTl).addTo(controller);

        var scene2 = new ScrollMagic.Scene({
            triggerElement: $(window)
        })
        .setPin("#actionbar")
        .addTo(controller);

any ideas? THANKS!

 

[Jonathan 5,176 Likes (Superhero)]

Hello nicmare, and welcome to the GreenSock Forum!

 

This looks more of a ScrollMagic setPin question than a GSAP related question. Have you tried posting your question in the ScrollMagic Support Issues page. Even though ScrollMagic is made with GSAP, it is not made by GreenSock. Scroll Magic is made by Jan Paepke. He said he welcomes any issues you might have with his plugin.

 

https://github.com/janpaepke/ScrollMagic/issues

 

Others in the forum might be able to assist you but i would highly recommend also posting your issue at the above link.

 

Happy Tweening

[nicmare 1 Likes (Newbie)]

Thanks Jonathan,

I will ask Jan fro ScrollMagic