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

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

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

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

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;

}

нет уведомлений

Официальный сайт

перейти

Совместимость

Сайты Ucoz

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

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

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

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

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