Фиксированное меню для Opencart

Простой способ зафиксировать меню на примере Opencart (аналогично и для других CMS) используя немного кода Javascript и минимум HTML/CSS.

Контейнер содержащий меню <div class="container"> оборачиваем в тег <div id="fixed-menu">

В файл header.tpl (header .twig) добавляем код JS:

<script type="text/javascript">
jQuery(document).ready(function($) {
  var
    $window = $(window),
    $target = $("#fixed-menu"),
    $h = $target.offset().top;
    $window.on('scroll', function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > $h) {
        $target.addClass("menu_fixed");
      } else {     
        $target.removeClass("menu_fixed");
      }
    });
});
</script>

jQuery(document).ready(function($) {

var

$window = $(window),

$target = $("#fixed-menu"),

$h = $target.offset().top;

$window.on('scroll', function() {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > $h) {

$target.addClass("menu_fixed");

} else {

$target.removeClass("menu_fixed");

}

});

</script>

И немного CSS:

<style>
	.menu_fixed {
		position: fixed !important;
		top: 0 !important;
		width: 100%;
		z-index:999;
	}
</style>

<style>

.menu_fixed {

position: fixed !important;

top: 0 !important;

width: 100%;

z-index:999;

}

</style>

Проверенно на шаблоне на основе стандартного, работает и в мобильной версии.

При скроллинге страницы изменение позиционирования меню сопровождается рывками, поскольку блок выпадает из потока, во избежание этого <div id="fixed-menu"> дополнительно обернуть элементом с такой же высотой.

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