Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Как сделать фиксированное меню в шапке
Скрипты

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

Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
Иначе отключаем залипание

Вот и вся логика.

HTML будет представлять собой что-то навроде
Код
<div id="nav">...Тут содержание навигации...</div>

В Javascript будем определять нашу логику
Код
jQuery(document).ready(function($) {
  var
   
  $window = $(window), // Основное окно
   
  $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке
   
  $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать)
   
  $window.on('scroll', function() {
   
  // Как далеко вниз прокрутили страницу
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   
  // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию
  if (scrollTop > $h) {
   
  $target.addClass("sheensay_fixed");
   
  // Иначе возвращаем всё назад
  } else {  
   
  $target.removeClass("sheensay_fixed");
  }
  });
   
});

Если не хотите включать залипание для мобильных браузеров, вам пригодится такой код:
Код
// Определяем мобильный браузер
// Определяем мобильный браузер
function MobileDetect() {
  var UA = navigator.userAgent.toLowerCase();
  return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i.test(UA)) ? true : false;
}
jQuery(document).ready(function($) {
  // Если браузер не мобильный, работаем
  if (!MobileDetect()) {
  var
   
  $window = $(window), // Основное окно
   
  $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке
   
  $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать)
   
  $window.on('scroll', function() {
   
  // Как далеко вниз прокрутили страницу
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   
  // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию
  if (scrollTop > $h) {
   
  $target.addClass("sheensay_fixed");
   
  // Иначе возвращаем всё назад
  } else {
   
  $target.removeClass("sheensay_fixed");
  }
  });
  }
});

В CSS определяется класс, которым фиксируем меню
Код
.sheensay_fixed {
  position: fixed !important;
  top: 0 !important;

}

Особености:

Тематика
Браузеры
Адаптация

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

Нет комментариев

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