iBars

Не работает "position: sticky"

Recommended Posts

На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В HTML-файле на компьютере это работает, но на хостинге перестает, хотя это просто вёрстка.

HTML:

...
<body>
<div class="box box-top sticky">
    <div class="container">
        <div class="menu_main">
            ...
        </div>
    </div>
</div>
</body>
...

 

CSS:

.sticky {
    position: sticky;
    top: 0;
    z-index: 11000;
}

 

Share this post


Link to post
Share on other sites
Убрал overflow-x: hidden; у body или html и прилипание заработало.
Нашел статью, там сказано что не следует использовать свойство overflow: hidden; overflow: scroll; или overflow: auto; для контейнера прилипающего блока. И также не следует задавать высоту для контейнера.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

    • By freeodmin2
      Друзья, всем привет. Я учусь верстать, и вот не могу разобраться сейчас, как сверстать такой элемент
      на десктопе 4 блока в ряд. на мобиле 4 блока в столбик.
      как бы проблемы с вёрсткой блока нет, как и с медиа запросом, чтобы на мобильнике их сделать в ряд.
      но как сверстать этот угол? да еще так, чтобы у всего этого блока была тень. вот как сверстать такую фигуру с закруглением всех углов на 10 пикселей и добавлением тени?
      помогите плиз кодом
      всем заранее спасибо за участие
      вот картинка для наглядности

    • By Super_Saimon
      Добрый день! Я столкнулся с такой ситуацией: создается в компании статическая страница для хранения служебных документов. Иконки там, по-факту, не нужны, но начальник как во всем известном видео: "Хочу иконки!". Для нее поднимается локальный сервер без выхода в инет. На сайте есть ссылка прямая на хранилище с данными иконками, но она при такой настройке сервера, не работоспособна. Я качнул с сайта архив с данными иконками. Прописал как в инструкции путь в проекте. И тут я в непонимании: в инструкции для локального подключения подключается файл с расширением .css, через  тег <link>, при этом все иконки, которые я использовал при подключении прямой ссылки на хранилище через <script>, пропали. Вместо них квадратики. Я пробовал  точно также через <script> указать локальный адрес на файл с расширением .js. Но в результате иконки просто пропали. В чем может быть проблема?
  • Member Statistics

    46,421
    Total Members
    3,128
    Most Online
    Openair
    Newest Member
    Openair
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.