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

[admin]

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

 

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

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

Давайте сделаем.

Файл

/catalog/view/theme/.../template/common/header.tpl

Оборачиваем код вывода меню в 

<div id="navigation">
..........
</div>

К примеру по умолчанию получится так
 

<?php if ($categories) { ?>
<div id="navigation">
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
    </div>
  </nav>
</div>
 </div>
<?php } ?>

Добавим скрипт

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

Поясню... при скролле страницы вниз на 140px (как правило это высота контента над меню (топ меню, шапка сайта)

<div id="navigation">

превращается в

<div id="navigation" class="fixed"> 

 и наоборот при скролле ввех при расстоянии 140px от реального верха сайта этот класс удаляется

То есть вы можете сами отредактировать данную высоту под себя

Добавим стили для  фиксации меню вверху экрана

#navigation.fixed{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999
}

 

[admin]

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

$(window).resize(function() {
  if(document.documentElement.clientWidth > 991) {
    // тут ваш скрипт
  }
});

То есть работу скрипта мы можем ограничить шириной экрана на котором просматривают наш ресурс
Чтобы написать еще один скрипт для мобильной версии, думаю понятно что сделать )))
к примеру 

<script>

$(window).resize(function() {
  if(document.documentElement.clientWidth < 991) {


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

 }
});
</script>

и стили для фиксации

#navigation.fixedmobile{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999
}

p.s. Еслу у вас в коде 2 меню...одно из которых отображается на десктопе, а второе в мобильной версии, то оборачиваете второе к примеру в 

<div id="navigationmobile"> .......... </div>

и применяя ту же логику  пишите скрипт и стили

Теперь когда Вы знаете у Вас открывается большое поле для изменения отображения своего ресурса