Перейти к содержанию
  • В связи с блокировкой банка QIWI оплата через сайт не возможна.
    Для оплаты и получения дополнений просьба писать в личные сообщения
    Admin*у
    После оплаты Вам так же будет доступно скачивание дополнений и обновлений на данном форуме

Фиксированное меню при прокрутке страницы


Рекомендуемые сообщения

На самом деле не так страшен черт как его малюют. 
Приступим: 
Для начала обернем блок ( я от балды просто обернул код вывода меню навигации) , который надо зафиксировать при прокрутке в

<div id="scroll-menu" class="default">

...

</div>


Далее пишем простой ""жабаскрипт" смены класса данного блока при определенном расстоянии

<script>

 $(document).ready(function(){

        var $menu = $("#scroll-menu");

        $(window).scroll(function(){

            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){

                $menu.removeClass("default").addClass("fixed");

            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {

                $menu.removeClass("fixed").addClass("default");

            }

        });//scroll

    });

</script>

 

*тут 100 - это расстояние прокрутки вверх или вниз на 100px (шапки бывают разной высоты, поэтому полной универсальности не ждите... пропишите сколько нужно)

вставляем этот скрипт в шапку перед 

</head>


Ну и стиль для фиксированного блока: 

#scroll-menu.fixed{

position: fixed;

top: 0;

z-index:99;

margin:auto;

width: 100%

}


все, господа.... просто? 

Ссылка на комментарий

из новинок: 
 

приблуда фиксации блока при скролле средствами css
 

position: sticky;

(дочерний блок фиксируется в пределах родительского блока )

пример 1

прикрепить элемент к верхнему краю

 
./КЛАСС ФИКСИРУЕМОГО БЛОКА/) {
 position: sticky;
 position: -webkit-sticky;/* Safari */
 top: 0;
}


пример 2

прикрепить элемент к нижнему краю
 

./КЛАСС ФИКСИРУЕМОГО БЛОКА/) {
 position: sticky;
 position: -webkit-sticky;/* Safari */
 bottom: 0;
}

 

Ссылка на комментарий

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...