Magento Scrolling Menu (RWD)

magento-scrolling-menu.js

/**
* Magento Scrolling Menu (RWD)
*
* Author:
*   Rafael Patro <rafaelpatro@gmail.com>
*
* Source:
*   https://gist.github.com/rafaelpatro/f3d62f82a6ae4c0f75465d99655dd791
*
* Intallation:
*   Add a CMS Static Block applying the entire script below.
*   Add a Widget to pages you want.
*
* License:
*   GNU General Public License <http://www.gnu.org/licenses/>.
*/
(function(){
  if (document.viewport.getWidth() >= 771) {
    $$('.main-container').each(function (mainContainer) {
      var css = '\
        @media only screen and (min-width: 771px) {\
          .scroll-header {\
            position: fixed;\
            top: 0;\
            z-index: 10;\
            left: 0;\
            width: 100%;\
            height: 50px;\
            max-width: none;\
            background-color: rgba(51, 153, 204, 0.7);\
            transition: background 2s;\
          }\
          .scroll-header-search {\
            top: 5px !important;\
            right: 325px !important;\
            width: 50% !important;\
            transition: width 1s;\
          }\
        }\
      ';
      var style = new Element('style').update(css);
      style.type = 'text/css';
      document.head.insert({ bottom: style });
      var originalMarginTop = mainContainer.style.marginTop;
      var originalHeaderHeight = $('header').offsetHeight;
      $$('.top-container').each(function(container){
      originalHeaderHeight += container.offsetHeight;
      });
      Event.observe(window, 'scroll', function () {
        var hideOnScroll = '.logo, #header-nav, .top-container';
        var changeOnScroll = '#header, #header-search';
        var offset = document.viewport.getScrollOffsets()['top'];
        if (offset > originalHeaderHeight) {
          $$(hideOnScroll).each(Element.hide);
          $$(changeOnScroll).each(function(e){e.addClassName('scroll-' + e.id)});
          mainContainer.style.marginTop = originalHeaderHeight + 'px';
        } else {
          mainContainer.style.marginTop = originalMarginTop;
          $$(changeOnScroll).each(function(e){e.removeClassName('scroll-' + e.id)});
          $$(hideOnScroll).each(Element.show);
        }
      });
    });
  }
})();