Создание фиксированного меню

20.12.2014 Патешин Евгений Prestashop 8 Comments

В этот раз я покажу как достаточно легко и просто с помощью jQuery и CSS сделать меню сайта PrestaShop фиксированным в верхней части сайта при прокрутке страницы.Сделать это достаточно просто. Для начала необходимо определить класс блока в котором находится наше меню. Для этого я воспользуюсь инструментом разработчика в Chrome. На блоке меню нажимаем правую кнопку мышки и в появившемся окне инструмента находим class

В данном случае пример на штатном шаблоне PrestaShop версии 1.6.0.9 и как видим на картинке наш класс sf-menu
Далее необходимо разместить код jQuery в самом низу файла header.tpl вашего шаблона

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

var nav = $('.sf-menu');

$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});

});

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

var nav = $('.sf-menu');

$(window).scroll(function () {

if ($(this).scrollTop() > 136) {

nav.addClass("f-nav");

} else {

nav.removeClass("f-nav");

}

});

Поясняю. как видно из кода в скрипте назначается постоянная var nav = $(‘.sf-menu’); для класса блока нашего меню. При скролле мышкой если расстояние от верхней токи сайта будет превышать 136px срабатывает CSS со стилям класса f-nav.
Добавим далее эти стили.

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

1	.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

Вот и все. Вы можете воспользоваться моим примером или бесплатным модулем, который я подготовил специально для этой статьи.
До встречи на webnewbie.ru