Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2013, 16:53
Новичок на форуме
Отправить личное сообщение для osdohtem Посмотреть профиль Найти все сообщения от osdohtem
 
Регистрация: 16.04.2013
Сообщений: 6

Sticky sidebar — изменение логики
Имеется скрипт https://github.com/rickharris/StickyScroll
Работает он следующим образом:
имеется боковая колонка и когда сайдбар начинает пропадать из поле видимости, он фиксируется, демо:
http://poligon.ruaut.ru/forum.php?styleid=4
Нужно поменять поведение на следующую:
сайдбар не фиксируется, пока не достигнут его низ, то-есть как здесь:
http://www.bmwclub.ru/vb/
В жс крайне не силён, буду рад помощи.
Готов заплатить немного денег за решение.
/**
 * StickyScroll
 * written by Rick Harris - @iamrickharris
 * 
 * Requires jQuery 1.4+
 * 
 * Make elements stick to the top of your page as you scroll
 *
 * See README for details
 *
*/

(function($) {
  $.fn.stickyScroll = function(options) {
  
    var methods = {
      
      init : function(options) {
        
        var settings;
        
        if (options.mode !== 'auto' && options.mode !== 'manual') {
          if (options.container) {
            options.mode = 'auto';
          }
          if (options.bottomBoundary) {
            options.mode = 'manual';
          }
        }
        
        settings = $.extend({
          mode: 'auto', // 'auto' or 'manual'
          container: $('body'),
          topBoundary: null,
          bottomBoundary: null
        }, options);
        
        function bottomBoundary() {
          return $(document).height() - settings.container.offset().top
            - settings.container.attr('offsetHeight');
        }

        function topBoundary() {
          return settings.container.offset().top
        }

        function elHeight(el) {
          return $(el).attr('offsetHeight');
        }
        
        // make sure user input is a jQuery object
        settings.container = $(settings.container);
        if(!settings.container.length) {
          if(console) {
            console.log('StickyScroll: the element ' + options.container +
              ' does not exist, we\'re throwing in the towel');
          }
          return;
        }

        // calculate automatic bottomBoundary
        if(settings.mode === 'auto') {
          settings.topBoundary = topBoundary();
          settings.bottomBoundary = bottomBoundary();
        }

        return this.each(function(index) {

          var el = $(this),
            win = $(window),
            id = Date.now() + index,
            height = elHeight(el);
            
          el.data('sticky-id', id);
          
          win.bind('scroll.stickyscroll-' + id, function() {
            var top = $(document).scrollTop(),
              bottom = $(document).height() - top - height;

            if(bottom <= settings.bottomBoundary) {
              el.offset({
                top: $(document).height() - settings.bottomBoundary - height
              })
              .removeClass('sticky-active')
              .removeClass('sticky-inactive')
              .addClass('sticky-stopped');
            }
            else if(top > settings.topBoundary) {
              el.offset({
                top: $(window).scrollTop()
              })
              .removeClass('sticky-stopped')
              .removeClass('sticky-inactive')
              .addClass('sticky-active');
            }
            else if(top < settings.topBoundary) {
              el.css({
                position: '',
                top: '',
                bottom: ''
              })
              .removeClass('sticky-stopped')
              .removeClass('sticky-active')
              .addClass('sticky-inactive');
            }
          });
          
          win.bind('resize.stickyscroll-' + id, function() {
            if (settings.mode === 'auto') {
              settings.topBoundary = topBoundary();
              settings.bottomBoundary = bottomBoundary();
            }
            height = elHeight(el);
            $(this).scroll();
          })
          
          el.addClass('sticky-processed');
          
          // start it off
          win.scroll();

        });
        
      },
      
      reset : function() {
        return this.each(function() {
          var el = $(this),
            id = el.data('sticky-id');
            
          el.css({
            position: '',
            top: '',
            bottom: ''
          })
          .removeClass('sticky-stopped')
          .removeClass('sticky-active')
          .removeClass('sticky-inactive')
          .removeClass('sticky-processed');
          
          $(window).unbind('.stickyscroll-' + id);
        });
      }
      
    };
    
    // if options is a valid method, execute it
    if (methods[options]) {
      return methods[options].apply(this,
        Array.prototype.slice.call(arguments, 1));
    }
    // or, if options is a config object, or no options are passed, init
    else if (typeof options === 'object' || !options) {
      return methods.init.apply(this, arguments);
    }
    
    else if(console) {
      console.log('Method' + options +
        ' does not exist on jQuery.stickyScroll');
    }

  };
})(jQuery);

Последний раз редактировалось osdohtem, 16.04.2013 в 16:57.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отловить изменение computedStyle элемента danik.js Events/DOM/Window 8 25.10.2012 16:40
XUL Sidebar & Silverlight Herclia Javascript под браузер 0 18.05.2011 04:08
Как обработать изменение масштаба окна в IE8 ? v_k Events/DOM/Window 1 09.08.2010 13:35
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17