Перейти к содержанию
lilovkin

position:fixed внутри блока

Рекомендуемые сообщения

Добрый день! Как сделать так, чтобы, например: меню стоит за хедером спокойно, но как мы стали прокручивать страницу и меню в определенный момент подхватывалось и делалось в position:fixed? Такое можно увидеть здесь http://relaxbath.ru/ (не реклама!)

Попробуйте прокрутить страницу верх и вниз, заметите, что меню при прокрутке вниз в определенный момент становить в position:fixed,  а как поднимемся в самый вверх, то меню уже не фиксированное. 

Дайте наводку пожалуйста, как реализовать такое

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

jquery

спасибо, нашел. но у них походу сделано так, что когда выходит рамка за определенные пиксели, то есть прокрутили страницу вниз на 150px, то просто появляется новый блок, а при менее 150px прокрутки, он исчезает

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Этим скриптом можно сделать фиксацию чего угодно.Вот как здесь например боковой модуль категорий.

 

http://demo.ocmarket.ru/desktops/test

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Этим скриптом можно сделать фиксацию чего угодно.Вот как здесь например боковой модуль категорий.

 

http://demo.ocmarket.ru/desktops/test

Спасибо большое! Скачал мод, поставил под свои нужны, теперь идет все хорошо, position:fixed ставится именно тогда, когда прокрутка страница добирается до определенного дива)). Но теперь проблема в другом, как сделать так, чтобы при прокрутке когда заканчивается <div id="content"> <div/>, наше "меню" осталось в конце  <div id="content"> <div/>, то есть внутри него, раз мы прокрутились дальше уже вниз страницы, там уже другая информация в другом диве, надеюсь поняли меня. Коротко: как ограничить position:fixed; до <div id="content"> <div/>, а когда уже прокрутка вышла за <div id="content"> <div/>, то "меню" не исчезло. Могу в ЛС отправить адрес сайта, поймете сразу о чем речь. Спасибо

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

код из js

// Sticky Plugin v1.0.0 for jQuery
// =============
// 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',
      center: false,
      getWidthFrom: ''
    },
    $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', '');
            s.stickyElement.parent().removeClass(s.className);
            s.currentTop = null;
          }
        }
        else {
          var newTop = documentHeight - s.stickyElement.outerHeight()
            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
          if (newTop < 35) {
            newTop = newTop + s.topSpacing;
          } else {
            newTop = s.topSpacing;
          }
          if (s.currentTop != newTop) {
            s.stickyElement
              .css('position', 'fixed')
              .css('top', '35px');

            if (typeof s.getWidthFrom !== 'undefined') {
              s.stickyElement.css('width', $(s.getWidthFrom).width());
            }

            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 = $('<div></div>')
            .attr('id', stickyId + '-sticky-wrapper')
            .addClass(o.wrapperClassName);
          stickyElement.wrapAll(wrapper);

          if (o.center) {
            stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
          }

          if (stickyElement.css("float") == "right") {
            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
          }

          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,
            getWidthFrom: o.getWidthFrom
          });
        });
      },
      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);

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
надеюсь поняли меня. 

 

Нет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.