position: fixed is added to pin div

[BevCyc]

How can I prevent a style of position:fixed from being added to my pin container? If I add !important to position: relative in .slide it stays relative but then there's extra padding above and below the slide. Also why does TweenMax.fromTo("#slide1head", 1, {backgroundPosition: "-1440px center"}, {backgroundPosition: "center center", ease: Linear.easeNone} move from right to left?

Here's what I have:

<script type="text/javascript">
$(document).ready(function(){

    // init the controller
    var controller = new ScrollMagic({
        vertical: true,
        globalSceneOptions: {
            triggerHook: "onLeave"
        }
    });

    // slide 1 background
    var s1tween1 = new TimelineMax ()
        .add([
            /*TweenMax.to("#bg1", 1, {backgroundPosition: "center bottom", ease: Linear.easeNone})*/
            TweenMax.fromTo("#bg1", 1, {backgroundPosition: "center top", ease: Linear.easeNone}, {backgroundPosition: "center bottom", ease: Linear.easeNone})
        ]);

    var s1scene1 = new ScrollScene({
        triggerElement: "#slide1",
        duration: 5000,  
        offset: 0
    })
        .setTween(s1tween1)
        .setPin("#slide1")
        .addTo(controller);

    // slide 1 DU header left to right
    var s1tween2 = new TimelineMax ()
        .add([
            TweenMax.fromTo("#slide1head", 1, {backgroundPosition: "-1440px center"}, {backgroundPosition: "center center", ease: Linear.easeNone})
        ]);

    var s1scene2 = new ScrollScene({
        duration: 1000,  
        offset: 100
    })
        .setTween(s1tween2)
        .addTo(controller);

});
</script>

<div id="slide1">
    <div id="bg1">
            <div id="slide1head"></div>
    </div> <!-- /#bg1 -->
</div> <!-- /#slide1 -->

In the stylesheet style2.css I have:

@charset "utf-8";
/* CSS Document */

body {
    background-color: #0FF;
}
body, html {
    height: 100%;
}
.slide {
    position: relative;
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
/* slide 1 */
#bg1 {
    background-image: url(../images/section1-starfield.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}
#slide1head {
    background-image: url(../images/slide1-header.png);
    background-position: -1440px center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 3;
}

[janpaepke]

Hi!
the style of position:fixed is the only way to pin a div. So it's a necessity to add this style.
Why would you want to prevent this?
The reason your background image moves in a different direction than expected has something to do with its size. I don't know the size of slide1-header.png, so I can't tell you what exactly.
To post code please use ``` (triple ticks). For more information see githubs markdown specs.

regards,
J

[hafizio]

My question is related to the issue above.

I have a progress bar element pinned. But when it's pinned, the size of the progress bar will become smaller than it should be. Most probably due to position: fixed. How to pin the element yet preserve it's size? Thank you

[janpaepke]

Preserving size is something that is quite tricky with pinned elements.
The reason is that relative size is in relation to the window, when the element is fixed and in relation to it's parent, when the element is in flow.
So I don't know about your specific case, but in most cases you can probably just add a size (like width = 100%) to your element and you should be fine.
If this doesn't help in your case it would help a great deal if you could provide a jsfiddle showcasing the issue.
Then I could try to tackle it in the upcoming version (1.1.0) of ScrollMagic.