orbit4-5/app/assets/javascripts/group.js

(function() {
    "use strict";

    // Commonly use variables
    var doc = document;

    var group = {
        // Detect and change the top position of the cycle navs
        cycleFix: function() {
          if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
              var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
                  cycleNav = doc.querySelectorAll( ".cycle-nav" ),
                  len = cycleNav.length,
                  i = -1;

              // Hide the navs when there's noly one slide
              if( imgs.length <= 1 ) {
                  for( i = 0; i < len; i++ ) {
                      cycleNav[ i ].classList.add( "hide" );
                  }
              }
              
          } else if ( doc.querySelectorAll( ".group-post-banner-image").length === 0 && doc.querySelector( ".group-post-image-wrap" ) ) {
              doc.querySelector( ".group-post-image-wrap").classList.add( "hide" );
          }
        },
        // Create scroll effect (with css)
        scrollEffect: function() {
          if( doc.querySelector( ".group-page") ) {
              var page = doc.querySelector( ".group-page" ),
                  wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
                  scrollClass = "scroll";

              // Use pageYOffset to get the Y positoin and add scroll on it, the animation
              // is done by css transition
              window.addEventListener( "scroll", function() {
                if( window.pageYOffset !== 0 ) {
                    page.classList.add( scrollClass );
                } else {
                    page.classList.remove( scrollClass );
                }
              }, false);
          }
        }
    }

    // When DOM is completely loaded, execute these functions
    document.addEventListener( "DOMContentLoaded", function( event ) {
        group.cycleFix();  
        group.scrollEffect();
    });

})();