RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Прилипание блока к верху сайта при его прокручивании

Прилипание блока к верху сайта при его прокручивании Иногда требуется сделать прилипающее к верху сайта меню. Начальное положение блока меню может быть любым, необязательно в самом верху страницы. Но при прокрутке вниз, это меню должно остаться прилипшим сверху.

Для этого необходимо в файл скрптов или на саму страницу вставить такой скрипт

/* Прилипание меню */
<script type="text/javascript">
    var objToStick = $("#objToStick"); //Получаем нужный объект
    var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока
    
    $(window).scroll(function () {
        var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно
        if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его
            $(objToStick).addClass("topWindow");
        } else {
            $(objToStick).removeClass("topWindow");
        };
    });
</script>

 

Добавить в css стиль

.topWindow {
    position: fixed;
    top: 0;
    z-index:9999; /* Чтобы приклеенный элемент располагался над всеми остальными элементами страницы */
}

Также можно приклеивать блок не только к верху, но к любой стороне окна, задавая нужные css-стили.

Ещё одна хитрость. Так как блок будет располагаться поверх других, то место, которое он занимал на странице до прокрутки к этому блоку, схлопнется. На вид это будет выглядеть как резкий рывок в прокрутке на расстояние равное высоте этого блока. Это не очень красиво выглядит. Поэтому лучше заключить блок в оберточный блок и фиксировать тому высоту. Ниже показан html код для меню Yii2.

<div style="height:50px; margin-bottom: 16px;">        
<!-- Горизонтальное меню -->    
    <?php
        NavBar::begin([
            //'brandLabel' => 'КЦ',
            'renderInnerContainer' => true,
            'brandUrl' => Yii::$app->homeUrl,
            'options' => [
                'class' => 'navbar-defaul main-nav navbar-fixed-top',
                'id' => 'objToStick',
            ],
        ]);
        echo Nav::widget([
            'options' => ['class' => 'nav-justified'],
            'items' => [
                ['label' => 'О центре', 'url' => ['/site/about']],
                ['label' => 'Афиша', 'url' => ['/event'], 'active' => $this->context->route == 'event/index'],
                ['label' => 'Кружки и студии', 'url' => ['/group'], 'active' => $this->context->route == 'group/index'],
                ['label' => 'Контакты', 'url' => ['/site/contact']],
                /*Yii::$app->user->isGuest ?
                    ['label' => 'Login', 'url' => ['/site/login']] :
                    ['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                        'url' => ['/site/logout'],
                        'linkOptions' => ['data-method' => 'post']],*/
            ],
        ]);
        NavBar::end();
    ?>
<!-- /Горизонтальное меню -->
</div>

 

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.