Difference between revisions of "Template:Peking/Javascript/jquery sticky"

(Created page with "// Sticky Plugin // ============= // Author: Anthony Garand // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) // Improvements by Leonardo C. Daronco (daron...")
 
 
(3 intermediate revisions by the same user not shown)
Line 111: Line 111:
 
     });
 
     });
 
})(jQuery);
 
})(jQuery);
 +
 +
 +
 +
(function ($) {
 +
 +
    $.fn.stickySidebar = function (options) {
 +
 +
        var config = $.extend({
 +
            headerSelector: 'header',
 +
            navSelector: 'nav',
 +
            contentSelector: '#content',
 +
            footerSelector: 'footer',
 +
            sidebarTopMargin: 20,
 +
            footerThreshold: 40
 +
        }, options);
 +
 +
        var fixSidebr = function () {
 +
 +
            var sidebarSelector = $(this);
 +
            var viewportHeight = $(window).height();
 +
            var viewportWidth = $(window).width();
 +
            var documentHeight = $(document).height();
 +
            var headerHeight = $(config.headerSelector).outerHeight();
 +
            var navHeight = $(config.navSelector).outerHeight();
 +
            var sidebarHeight = sidebarSelector.outerHeight();
 +
            var contentHeight = $(config.contentSelector).outerHeight();
 +
            var footerHeight = $(config.footerSelector).outerHeight();
 +
            var scroll_top = $(window).scrollTop();
 +
            var fixPosition = contentHeight - sidebarHeight;
 +
            var breakingPoint1 = headerHeight + navHeight;
 +
            var breakingPoint2 = documentHeight - (sidebarHeight + footerHeight + config.footerThreshold);
 +
 +
            // calculate
 +
            if ((contentHeight > sidebarHeight) && (viewportHeight > sidebarHeight)) {
 +
 +
                if (scroll_top < breakingPoint1) {
 +
 +
                    sidebarSelector.removeClass('sticky');
 +
 +
                } else if ((scroll_top >= breakingPoint1) && (scroll_top < breakingPoint2)) {
 +
 +
                    sidebarSelector.addClass('sticky').css('top', config.sidebarTopMargin);
 +
 +
                } else {
 +
 +
                    var negative = breakingPoint2 - scroll_top;
 +
                    sidebarSelector.addClass('sticky').css('top', negative);
 +
 +
                }
 +
 +
            }
 +
        };
 +
 +
        return this.each(function () {
 +
            $(window).on('scroll', $.proxy(fixSidebr, this));
 +
            $(window).on('resize', $.proxy(fixSidebr, this))
 +
            $.proxy(fixSidebr, this)();
 +
        });
 +
 +
    };
 +
 +
}(jQuery));

Latest revision as of 12:28, 2 August 2016

// Sticky Plugin // ============= // Author: Anthony Garand // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) // Improvements by Leonardo C. Daronco (daronco) // Created: 2/14/2011 // Date: 2/12/2012 // Website: http://labs.anthonygarand.com/sticky // Description: Makes an element on the page stick on the screen as you scroll // It will only set the 'top' and 'position' of your element, you // might need to adjust the width in some cases.

(function($) { 

   var defaults = {
           topSpacing: 0,
           bottomSpacing: 0,
           className: 'is-sticky',
           wrapperClassName: 'sticky-wrapper'
       },
       $window = $(window),
       $document = $(document),
       sticked = [],
       windowHeight = $window.height(),
       scroller = function() {
           var scrollTop = $window.scrollTop(),
               documentHeight = $document.height(),
               dwh = documentHeight - windowHeight,
               extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
           for (var i = 0; i < sticked.length; i++) {
               var s = sticked[i],
                   elementTop = s.stickyWrapper.offset().top,
                   etse = elementTop - s.topSpacing - extra;
               if (scrollTop <= etse) {
                   if (s.currentTop !== null) {
                       s.stickyElement
                           .css('position', )
                           .css('top', )
                           .removeClass(s.className);
                       s.stickyElement.parent().removeClass(s.className);
                       s.currentTop = null;
                   }
               }
               else {
                   var newTop = documentHeight - s.stickyElement.outerHeight()
                       - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                   if (newTop < 0) {
                       newTop = newTop + s.topSpacing;
                   } else {
                       newTop = s.topSpacing;
                   }
                   if (s.currentTop != newTop) {
                       s.stickyElement
                           .css('position', 'fixed')
                           .css('top', newTop)
                           .addClass(s.className);
                       s.stickyElement.parent().addClass(s.className);
                       s.currentTop = newTop;
                   }
               }
           }
       },
       resizer = function() {
           windowHeight = $window.height();
       },
       methods = {
           init: function(options) {
               var o = $.extend(defaults, options);
               return this.each(function() {
                   var stickyElement = $(this);

                   stickyId = stickyElement.attr('id');
wrapper = $('
') 
                       .attr('id', stickyId + '-sticky-wrapper')
                       .addClass(o.wrapperClassName);
                   stickyElement.wrapAll(wrapper);
                   var stickyWrapper = stickyElement.parent();
                   stickyWrapper.css('height', stickyElement.outerHeight());
                   sticked.push({
                       topSpacing: o.topSpacing,
                       bottomSpacing: o.bottomSpacing,
                       stickyElement: stickyElement,
                       currentTop: null,
                       stickyWrapper: stickyWrapper,
                       className: o.className
                   });
               });
           },
           update: scroller
       };

   // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
   if (window.addEventListener) {
       window.addEventListener('scroll', scroller, false);
       window.addEventListener('resize', resizer, false);
   } else if (window.attachEvent) {
       window.attachEvent('onscroll', scroller);
       window.attachEvent('onresize', resizer);
   }

   $.fn.sticky = function(method) {
       if (methods[method]) {
           return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
       } else if (typeof method === 'object' || !method ) {
           return methods.init.apply( this, arguments );
       } else {
           $.error('Method ' + method + ' does not exist on jQuery.sticky');
       }
   };
   $(function() {
       setTimeout(scroller, 0);
   });

})(jQuery);


(function ($) { 

   $.fn.stickySidebar = function (options) {

       var config = $.extend({
           headerSelector: 'header',
           navSelector: 'nav',
           contentSelector: '#content',
           footerSelector: 'footer',
           sidebarTopMargin: 20,
           footerThreshold: 40
       }, options);

       var fixSidebr = function () {

           var sidebarSelector = $(this);
           var viewportHeight = $(window).height();
           var viewportWidth = $(window).width();
           var documentHeight = $(document).height();
           var headerHeight = $(config.headerSelector).outerHeight();
           var navHeight = $(config.navSelector).outerHeight();
           var sidebarHeight = sidebarSelector.outerHeight();
           var contentHeight = $(config.contentSelector).outerHeight();
           var footerHeight = $(config.footerSelector).outerHeight();
           var scroll_top = $(window).scrollTop();
           var fixPosition = contentHeight - sidebarHeight;
           var breakingPoint1 = headerHeight + navHeight;
           var breakingPoint2 = documentHeight - (sidebarHeight + footerHeight + config.footerThreshold);

           // calculate
           if ((contentHeight > sidebarHeight) && (viewportHeight > sidebarHeight)) {

               if (scroll_top < breakingPoint1) {

                   sidebarSelector.removeClass('sticky');

               } else if ((scroll_top >= breakingPoint1) && (scroll_top < breakingPoint2)) {

                   sidebarSelector.addClass('sticky').css('top', config.sidebarTopMargin);

               } else {

                   var negative = breakingPoint2 - scroll_top;
                   sidebarSelector.addClass('sticky').css('top', negative);

               }

           }
       };

       return this.each(function () {
           $(window).on('scroll', $.proxy(fixSidebr, this));
           $(window).on('resize', $.proxy(fixSidebr, this))
           $.proxy(fixSidebr, this)();
       });

   };

}(jQuery));