Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Фиксированное меню при прокрутке страницы RSS
июн 25 2015 photo

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

Alessa Shtern 40 921
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5

 

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

 

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

 

Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение. 

Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.

 

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

Наш HTML:

 


	 
	<div id="header">
	    <div id="navigation">
	        <ul id="menu">
	            <li><a href="">Сумки</a></li>
	            <li><a href="">Обувь</a></li>
	            <li><a href="">Шарфы</a></li>
	            <li><a href="">Одежда</a></li>
	            <li><a href="">Аксессуары</a></li>
	        </ul>
	    </div>
	</div>
	 

 

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)

 


	 
	#header {
	    height: 180px;
	}
	#navigation{
	    background: #EF0505;
	    height: 40px;
	    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
	    font-size: 16px;
	    line-height: 40px;
	    position: relative;
	    top: 140px;
	}
	#navigation.fixed{
	    position: fixed;
	    top: 0;
	    width: 100%;
	    background: rgba(239, 5, 5, 0.95);
	}
	#navigation ul{
	    width: 1180px;
	    padding-left: 0;
	    margin: 0 auto;
	    display: block;
	}
	#menu li{
	    float: left;
	    list-style: none;
	    padding: 0 25px;
	    border-right: 1px solid #D60000;
	}
	#menu a {
	    color: #fff;
	    text-decoration: none;
	    font-family: Verdana;
	}
	#menu>li a:hover{
	    color: #656565;
	    transition: color 0.5s ease;
	}
	 

 

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

 

    jQuery(function($) {
	        $(window).scroll(function(){
	            if($(this).scrollTop()>140){
	                $('#navigation').addClass('fixed');
	            }
	            else if ($(this).scrollTop()<140){
	                $('#navigation').removeClass('fixed');
	            }
	        });
	    });
	 

 

Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

 

 

ДЕМО

Теги: фиксированное меню навигационное меню меню

HashFlare
Другие новости по теме:
  • Мобильное меню для сайта
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • Выпадающее меню на jQuery

Комментарии к: Фиксированное меню при прокрутке страницы (32)

    1. №1  Павел 26-06-2015 Цитировать
      Интересная реализация меню, интересно только почему при скроле бэкграунд становится светлее?
    1. №2  Alessa Shtern 26-06-2015 Цитировать
      Потому что
      body {
      background: linear-gradient(-45deg, #CFCFCF, #555);
      }
      Не стала этот стиль указывать в самом посте, подумала что лишнее )
    1. №3  ДИБИЛЫ 20-02-2016 Цитировать
      под каким названием файлы кверту и сss
    1. №4  Alessa Shtern 20-02-2016 Цитировать
      Весь код есть в статье. Файлы в статье не прикладывала, потому непонятно о чем вы)
    1. №5  Den 26-03-2016 Цитировать
      Что сделать чтобы текст был по средине?
    1. №6  Alessa Shtern 29-03-2016 Цитировать
      Немного с запозданием. Нужно у #menu li убрать float: left и добавить display: inline-block.
      А у #navigation ul добавить text-align: center;
    1. №7  Роман 20-04-2016 Цитировать
      jQuery писали в отдельный файл и подключали к html?
    1. №8  Alessa Shtern 20-04-2016 Цитировать
      Да да, jQuery обязательно. Не указала так как привыкла что он обычно на сайте всегда есть.
    1. №9  Andrey 13-10-2016 Цитировать

      Здравствуй Alessa, я начинающий в этом деле, подскажи пожалуйста, вообщем создал два класса для моего меню

      #main-top {
      float:left;
      width:992px;
      height:223px;
      background: url(../images/main-top.png) 0 0 no-repeat;
      margin-top:77px;
      z-index:1000;
      }

      #main-top.fixed_top {
      float:left;
      width:992px;
      height:223px;
      background: url(../images/main-top.png) 0 0 no-repeat;
      top: 0px;
      position:fixed;
      z-index:1000;
      }
      Затем прикрепил на странице сайта квери
      <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>
      и в jQuery закинул уже саму функцию, ну и конечно же поменял там навигационное меню и класс.
      Но что-то я сделал не то, что он не срабатывает(((
      буду очень благодарен за помощь))))

    1. №10  Alessa Shtern 20-10-2016 Цитировать

      Я как всегда вовремя) Очень сложно понять что не так с фиксированным меню невидя сайт. Можете дать ссылку если еще актуально? (лучше писать так site точка ру, а то антиспам)

    1. №11  Анна 20-01-2017 Цитировать

      Хм...а почему демка не работает? Сломалось?

    1. №12  Alessa Shtern 21-01-2017 Цитировать

      Переезжали на h ttps, видимо поломалось. В понедельник починю :)

    1. №13  Olga 08-04-2017 Цитировать

      Добрый день

      Самый доходчивый материл по поводу фиксирования меню.

       

      Но помогите "чайнику"

      Я взяла уже готовую тему для друпал

      jquery update подключен

       

      куда нужно вписать эти волшебнуе строки?

       

      jQuery(function($) {
      $(window).scroll(function(){
      if($(this).scrollTop()>140){
      $('#navigation').addClass('fixed');
      }
      else if ($(this).scrollTop()<140){
      $('#navigation').removeClass('fixed');
      }
      });
      });

       

       

      спасибо



      спасибо. разобралась. в моей папке темы былв папка scripts, в ней main.js куда и был добавлен нужный вышеуказанный код.  

       

       

      спасибо еще раз за простой способ

    1. №14  Alessa Shtern 08-04-2017 Цитировать

      Всегда пожалуйста :)

    1. №15  Mr_lKl 23-04-2017 Цитировать

      Интересная Статья.

      Всё Достаточно Просто И Понятно Объяснено.

       

      Однако, Стало Интересно - Зачем Было Необходимо Указывать В Коде:

       

      else if ($(this).scrollTop()<***ВЫСОТА***)
      ,

       

      Ведь Можно Было Сократить До:

       

      else $('#navigation').removeClass('fixed')
      , 

       

      Ведь Эта Строчка Необходима Только В Случае, Если Высота, При Которой Меню Теряет Фиксацию, Отлична От Входной?

    1. №16  Alessa Shtern 24-04-2017 Цитировать

      Да, верно, можно было сократить. Почему тогда сделала именно так... наверное просто по логике) А так эта строчка конечно не имеет смысла

    1. №17  Марина 02-05-2017 Цитировать

      Здравствуйте. Подскажите, как задать отступ снизу в этом скрипте: <script type="text/javascript">var $ = jQuery.noConflict();var h_hght=100;var h_mrg=0;jQuery(function(){jQuery(window).scroll(function(){var top=jQuery(this).scrollTop();var elem=jQuery('#top-menu');if(top+h_mrg<h_hght){elem.css('top',(h_hght-top
      ));elem.removeClass('fix')}else{elem.css('top',h_mrg);elem.addClass('fix'
      )}})});</script> 

      Через этот скрипт у меня на сайте реализовано плавающее меню. И оно наползает на заголовки, если к ним перебрасывает с меню статьи. Я так поняла, что это отступ сверху var h_mrg=0; А как задается отступ снизу?

        

    1. №18  Alessa Shtern 03-05-2017 Цитировать

      О каком отступе снизу речь, если у элемента позиция fixed? В этой позиции задается позиция элемента относительно окна. 

    1. №19  Владимир 22-05-2017 Цитировать

      Здравствуйте, как сделать, чтобы меню изначально было скрыто?
      Именно, допустим, при прокрутке вниз, прокрутили 900px и оно "из ниоткуда" появилось и далее уже в фиксированной позиции было

    1. №20  Alessa Shtern 23-05-2017 Цитировать

      изначально прописать меню display:none, а когда меню приобретает класс fixed прописать display:block

    1. №21  Владимир 24-05-2017 Цитировать

      Спасибо за ответ!
      Но... не особо понимаю...
      Это в CSS или JS ?
      Если в файле стилей, то в какой # ?
      display:none - где писать?
      display:block - аналогично, где написать?



      Спасибо, разобрался

    1. №22  Михаил 10-06-2017 Цитировать

      Как сделать такое же, но вертикальное меню?
      Допустим, высотой 250px или же, вмещаюшее 5 пунктов меню
      Попытался переделать, не получилось

    1. №23  Alessa Shtern 16-06-2017 Цитировать

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

    1. №24  Денис 06-07-2017 Цитировать

      У меня почему то меню вправо съехало и ни в какую влево не хочет 

    1. №25  Alessa Shtern 11-07-2017 Цитировать

      в демо все нормально) на словах проблему не понять

    1. №26  Иван 14-08-2017 Цитировать

      Спасибо за доходчивый пример.

    1. №27  Алиса 11-11-2017 Цитировать

      А как она будет выглябеть в мобильном варианте?

    1. №28  Кирилл 14-07-2018 Цитировать

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

    1. №29  surasb.ru 31-07-2018 Цитировать

      Согласен с предыдущим отзывом,действительно пишут не понимая о чем,главное чтоб было.Вы просто МОЛОДЕЦ,все четко, понятно,а главное полностью рабочий вариант.Спасибо.

    1. №30  Дмитрий 15-10-2018 Цитировать

      добрый день!

       

      если честно, не совсем понятно.

       

      у меня есть html файл , в котором то, что написали

       

       

      и соответствующий style (который вы описали)

       

       

      А куда добавлять jQuery? в наш html файл ?

      или нужен отдельный файл, в который нужно вписать это? если в отдельный, то как его создать? в каком формате? как связать с нашим html ? нужно ли дополнительно скачивать, создавать?

       

       

      спасибо за понимание!

       

       

       

1 2
Имя:*
Комментарий:
Апдейты Яндекса
Яndex выдача 19.02.2019
Яndex тИЦ 25.12.2018
ЯКаталог 16.01.2018
Похожие статьи:
  • Мобильное меню для сайта
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • Выпадающее меню на jQuery
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • Мобильное меню для сайта
  • Всплывающие подсказки при помощи jQuery qTip
  • Фиксированное меню при прокрутке страницы
  • Кнопки социальных сетей для DLE
  • Принципы резиновой верстки сайта
  • Бесплатные PSD макеты в стиле метро
  • Комментарии для сайта и SEO
  • Красивое вертикальное меню на CSS
  • Как сделать бесшовный фон для сайта
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015