Фиксация меню при прокрутке на jquery и css

Фиксация меню при прокруткеФиксация меню при прокрутке

 

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

Однако интернет полнится множеством подобных решений фиксации меню при прокрутке, но зачастую реализация этих скроллингов довольно громоздко и трудно для установки. В этой инструкции будет предложена наиболее простейший вариант фиксации меню:

  1. Структура меню не имеет особого значения, для примера возьмем вот такую:

    <div id="menu" class="default">
    <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Joolma</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">HTML5&amp;CSS3</a></li>
    <li><a href="#">PHP</a></li>
    </ul>
    </div>

  2. Для работы фиксации меню подключаем jQuery и стили css

    <script>$(document).ready(function(){ var $menu = $("#menu");
    $(window).scroll(function(){
    if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
    $menu.removeClass("default").addClass("fixed");
    } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
    $menu.removeClass("fixed").addClass("default");
    }
    });//scroll });</script>

  3. CSS стили:

    #menu.fixed {
    position:fixed;
    top:0; left:0;
    width:100%;
    }

Вот собственно и весь скрипт для фиксации меню при прокрутке на jQuery. Для краткого пояснения в пункте 1, 2 и 3 заменяем id="menu" (в стилях #menu) и class="default"(в стилях .default) на свои id и класс. "fixed" в коде пункта 2 не трогаем.

Пример усложненной работы можете посмотреть здесь http://jsfiddle.net/zStXH/. Так же можете скачать полный пример с красивостями при прокрутке меню  

 

По материалам: http://webcomplex.com.ua/jquery/delaem-fiksirovannoe-menyu-pri-prokrutke-stranicy.html

 

Комментариев 2

  1. Офлайн
    danashop.ru
    danashop.ru 26 апреля 2016 21:07
    Привет. Подскажите пожалуйста, как сделать чтобы плавающее меню появлялось после того как пользователь прокрутит основное. У меня меню побольше высота примерно 270px; я изменил в скрипте 100 на 600 все работает. Но при прокрутке до того места где должно появиться меню, прокрутка еще проскакивает примерно на такое же расстояние как высота меню.
    1. Офлайн
      admin 30 апреля 2016 15:41
      Честно говоря, не представляю. Перейдите по ссылке на сайт автора, там он активно отвечает.
      --------------------
      Есть такая профессия-Россию кормить.

Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
  • Яндекс.Метрика Яндекс.Метрика