Затем прокрутите вверх

Ответ 1

Просто сделайте быстрый "источник просмотра" на http://lesscss.org/, и вы увидите следующее:

window.onscroll = function () {
    if (!docked && (menu.offsetTop - scrollTop() < 0)) {
        menu.style.top = 0;
        menu.style.position = 'fixed'; 
        menu.className = 'docked'; 
        docked = true;
    } else if (docked && scrollTop() <= init) { 
        menu.style.position = 'absolute'; 
        menu.style.top = init + 'px';
        menu.className = menu.className.replace('docked', ''); 
        docked = false;  
    }
};

Они привязаны к событию onscroll для окна, это событие запускается при прокрутке окна. Флаг docked имеет значение true, когда меню "заблокировано" в верхней части страницы, для меню установлено значение position:fixed, в то время как для этого флага установлено значение true. Остальное - это всего лишь несколько простых "мы собираемся прокрутить меню с страницы" и "находимся ли мы назад, где мы начали" логику проверки позиции.

Вы должны быть осторожны с событиями onscroll, хотя они могут быстро стрелять много, поэтому ваш обработчик должен быть довольно быстрым и должен прекомпопутировать как можно больше.

В jQuery это будет выглядеть примерно так:

$(window).scroll(function() {
    // Pretty much the same as what on lesscss.org
});

Вы часто встречаетесь с "плавающей почти фиксированной позицией вертикальной панелью инструментов", например, на cracked.com.

Ответ 2

mu слишком короткий ответ работает, я просто отправляю его, чтобы дать вам jquery script!

var docked = false;
var menu = $('#menu');
var init = menu.offset().top;

$(window).scroll(function() 
{       
        if (!docked && (menu.offset().top - $("body").scrollTop() < 0)) 
        {
            menu.css({
                position : "fixed",
                top: 0,
            });
            docked = true;
        } 
        else if(docked && $("body").scrollTop() <= init)
        {
            menu.css({
                position : "absolute",
                top: init + 'px',
            });

            docked = false;
        }
});

Ответ 3

Ответ Mu дал мне далеко. Я попробовал свою удачу с помощью метода replicationg lesscss.org, но столкнулся с проблемами при изменении размера и масштабировании браузера. Понадобился время, чтобы узнать, как правильно реагировать на это и как reset исходную позицию (init) без jQuery или любой другой библиотеки.

Найти предварительный просмотр в JSFiddle: http://jsfiddle.net/ctietze/zeasg/

Итак, вот простой код JavaScript, на всякий случай, если JSFiddle отказывается работать.

Класс повторного использования прокрутки, затем-щелчок

Здесь можно использовать многоразовую версию. Я поместил прокрутки в класс, потому что методы-помощники загромождали мое основное пространство имен:

var windowScrollTop = function () {
  return window.pageYOffset;
};

var Menu = (function (scrollOffset) {
  var Menu = function () {
    this.element = document.getElementById('nav');
    this.docked = false;
    this.initialOffsetTop = 0;

    this.resetInitialOffsetTop();
  }

  Menu.prototype = {
    offsetTop: function () {
      return this.element.offsetTop;
    },
    resetInitialOffsetTop: function () {
      this.initialOffsetTop = this.offsetTop();
    },

    dock: function () {
      this.element.className = 'docked'; 
      this.docked = true;
    },
    undock: function () {
      this.element.className = this.element.className.replace('docked', ''); 
      this.docked = false;
    },

    toggleDock: function () {
      if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
        this.dock();
      } else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) { 
        this.undock();
      }
    }
  };

  return Menu;
})(windowScrollTop);


var menu = new Menu();


window.onscroll = function () {
  menu.toggleDock();
};

Обработка событий изменения размера/страницы

var updateMenuTop = function () {
  // Shortly dock to reset the initial Y-offset
  menu.undock();
  menu.resetInitialOffsetTop();

  // If appropriate, undock again based on the new value
  menu.toggleDock();
};

var zoomListeners = [updateMenuTop];

(function(){
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0];

  var lastWidth = 0;

  function pollZoomFireEvent() {
    var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;

    if (lastWidth == widthNow) {
      return;
    }

    lastWidth = widthNow;

    // Length changed, user must have zoomed, invoke listeners.
    for (i = zoomListeners.length - 1; i >= 0; --i) {
      zoomListeners[i]();
    }
  }

  setInterval(pollZoomFireEvent, 100);
})();

Ответ 4

Звучит как приложение Jquery ScrollTop и некоторые манипуляции с CSS-свойствами элемента navbar. Так, например, при определенных условиях прокрутки элемент навигатора изменяется от абсолютного позиционирования с вычисленными координатами до фиксированного позиционирования.

http://api.jquery.com/scrollTop/

Ответ 5

Эффект, который вы описываете, обычно начинается с некоторого типа анимации, например, в ответе TheDeveloper. По умолчанию анимации обычно перемещают элемент вокруг, изменяя его положение с течением времени или затухая элемент в/из, изменяя его непрозрачность и т.д.

Получение эффекта "bouce back" или "snap to" обычно подразумевает ослабление. Все основные структуры имеют некоторую форму ослабления. Это все о личных предпочтениях; вы не можете ошибиться ни с одним из них.

jQuery имеет смягчающие плагины, которые можно использовать с помощью функции .animate(), или вы можете использовать jQueryUI.

MooTools имеет облегчение встраивания в класс FX основной библиотеки.

Yahoo YUI также имеет облегчение встраивания.

Если вы помните, какой сайт он был, вы всегда можете снова посетить его и посмотреть на источник, чтобы узнать, какие рамки и эффект были использованы.