г. Владимир, пр. Ленина 15а, офис 410

8 (499) 404-14-01
(телефон офиса)

8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

Задача зафиксировать меню при прокрутке страницы на сайте. Для этого нам потребуется скрипт и некоторые стили CSS

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. var objToStick = $("#menu"); //Получаем нужный объект, div который необходимо зафиксировать
  4. var topOfObjToStick = $(objToStick).offset().top; // Получаем начальное расположение нашего блока
  5. $(window).scroll(function () {
  6. var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно
  7. if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его
  8. $(objToStick).addClass(".block"); // добавляем класс к нашему блоку
  9. } else {
  10. $(objToStick).removeClass(".block"); // убираем класс блока при возврате
  11. };
  12. });
  13. });

А теперь получившемуся диву добавим CSS стили:

  1. .block {
  2. position: fixed;
  3. top: 0;
  4. z-index:9999; /*значение, которое дает расположение по оси Z выше других блоков*/
  5. }

Пример на сайте http://kraspult.ru/

Рекомендую отличный хостинг