Scrollmagic vs Skrollr

Question

I am trying to learn ScrollMagic library and to use it to achieve the same effects as what skrollr can do. One example I have been working on is having a menu bar that initially appears at the bottom of the page when you first load the application, but then it scrolls up to the top and remains fixed there.

The following code achieves this with Skrollr

<div class="menu" data-0="transform:translate3d(0,0px,0)"></div>

CSS

.menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  z-index: 999;
}

JS

 $(function () {
     var window_width = $(window).width(),
         window_height = $(window).height();
     var menu_height = $(".menu").height(),
         menu_offset = window_height - menu_height;
     $(".menu").attr("data-top", "transform:translate3d(0," + -menu_offset + "px,0)")
     var s = skrollr.init();
 });

I am trying to see if ScrollMagic can do something similar, but am finding their official wiki lacking in documentation. I do understand that they have a built in "pin" function. But to me it is not efficient because it doesn't use transform:translate like my example above, and instead uses absolute positioning with top: bottom:

Scrollmagic vs Skrollr

0 Answers0