Прилипающее меню при прокрутке - Готовые рецепты и советы

Делал себе, выложу и вам, может кому надо.

1.Окружаем дивом, который будет фиксировать, ваше меню:

<div class="navbar-wrapper">
Тут ваше меню или иной элемент для фиксации
</div>

2.В конце добавил мини скрипт:

   <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({});
        });
      });
    </script>

Удалил часть для простоты и убрал эффекты.

Это для того чтобы не
.isStuck{
    left:0px;
    width:100%;
}

ваше меню было на 100%

в принципи всё.

.navbar-wrapper {
    ваш стиль как у вас было
}

и в добавок пару скриптов, в атаче.

   <script src="/ваш путь от корня/jquery.js"></script>
    <script src="/ваш путь от корня/stickUp.min.js"></script>

 это в индекс шаблона ну и файлы согласно пути.

Бохтымой, зачем же сразу скриптами?  Это вполне можно реализовать на CSS

Нет, чисто на CSS это не сделать, ибо стили всего лишь формируют внешний вид, а вот реагировать на события не умеют.

Выложу ссылку http://jsfiddle.net/vlasenkofedor/BN4vj/
и так можно столько стиль поправить на все окно
http://jsfiddle.net/vlasenkofedor/6n16wbgg/
там пару строк. :-)

Федор, вообще-то хотели одним CSS, без JavaScript.

Только fixed, есть способы менять стили в некоторых ситуациях без js? но для прокрутки увы не знаю и больше всего нет
Примеры вышеозвученного
http://jsfiddle.net/vlasenkofedor/u9mhA/
http://jsfiddle.net/vlasenkofedor/59T3Z/
http://jsfiddle.net/vlasenkofedor/qPC6a/

Теперь отвечаю как работает код
внутри f=== jQuery, данный подход позволяет одновременно использовать внутри функции к примеру Mootols == $
 f('#secondary_bar') так-же как $('#secondary_bar') возвращает объект а у объекта методы можно по разному вызывать
Через точку как все постоянно видят, так и через $['metod']. Таким образом я формирую от условия динамически вызываемый метод
addClass или removeClass
вот и вся магия :-)

На CSS сделала фиксированное только, но без скрола)) Прилипшее к верху.

Сделала в Muse прилипающее меню, можно код посмотреть. Но там скрипты есть, дофига.
Блин, вот раньше делала на CSS разные эффекты, что то забыла всё.. я ещё посижу, подумаю, не успокоюсь))))

А пока вот, первый опыт в муське (это так просто, посмотреть а не как решение) 

Одним CSS можно сделать при некоторых условиях.
1 Меню всегда в самом верху
2 У меню фиксированная высота

Дело не в наличии или отсутствии js, а в качестве и логичности решения. Неважно 3 там строчки кода или 500. Рекомендуемый выше stickUp (демо), перехрдим по ссылке, скроллим на середину страницы, перезагружаемся. Мы остались там же, в середине страницы, но шапка пропала. Чтобы она появилась, нужно потыркать туда-сюда колесиком мыши. Это разве правильное, логичное поведение? Если я иду на страницу по якорю, то могу сразу попасть на середину страницы. И внезапные прилетания шапки (ой, мать моя! там оказывает шапка есть!) создают не лучшее впечатление о сайте.

Теперь смотрим вот этот плагин. Скроллим, перезагружаемся. Здорово?
Или вот этот
Или вообще трендовый, типа "Material UI"

Могут ли "3 строчки" показать подобный результат? Да и в каком веке живем? - на телефоне интернет быстрее, чем скоростной доступ по оптике 10 лет назад. И все эти бессмысленные гонки за "тремя строчками" остались там же - в 10летней давности. Важна только производительность кода, а не его объем (ну, если там не 10 мегабайт конечно). А для юзабилити важна логичность, плавность интерфейса.

al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает

al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает

Код: html4strict

 
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div id="test"></div>
    <script>
      window.onload = function () {
        window.name = (+window.name || 0) + 1;
        test.innerHTML = window.name;
      };
    </script>
  </body>
</html>

Это, как я понимаю, и есть пример малого, но качественного. Благодарю за информацию.

для качества здесь далеко. Это пример работы не более. Далее на разработку программисту.
Качественно, к примеру https://github.com/Poznakomlus/pagination
пользуйтесь на здоровье

ни как без скрипта, пробовал аж 4 способами....
 

зато для себя открыл много новых эффектов практикой.