Jump to content
Sign in to follow this  
lilovkin

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

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites

jquery

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

 

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/>, то "меню" не исчезло. Могу в ЛС отправить адрес сайта, поймете сразу о чем речь. Спасибо

Share this post


Link to post
Share on other sites

код из 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);

Share this post


Link to post
Share on other sites
надеюсь поняли меня. 

 

Нет.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.