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 Svenden
      Как слово эквилибриум сдвинуть немного вниз ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Эквилибриум </title> <link rel="stylesheet" href="/ecomapp/assets/css/style.css"> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> {% if not request.get_full_path == '/' %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Категории <span class="caret"></span></a> <ul class="dropdown-menu"> {% for category in categories %} <li><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li> {% endfor %} </ul> </li> {% endif %} </ul> </div> </nav> <!-- Page Content --> <div class="container"> {% block content %} <div class="row"> <div class="col-lg-3"> <p class="lead">Эквилибриум</p> <div class="list-group"> {% for category in categories %} <a href="{{ category.get_absolute_url }}" class="list-group-item">{{ category.name }}</a> {% endfor %} </div> </div> <!-- /.col-lg-3 --> <div class="row"> {% for product in products %} <div class="col-lg-4 col-md-6 mb-4"> <div class="thumbnail"> <img src="{{ product.image.url }}" alt="" style="width:100px; height: 150px;"> <div class="caption"> <h4 class="pull.right">{{ product.price }} руб.</h4> <h5><strong><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></strong></h5> <p>{{ product.description }}</p> </div> </div> </div> {% endfor %} </div> <!-- /.row --> </div> <!-- /.col-lg-9 --> </div> <!-- /.row --> </div> <!-- /.container --> <div class="container"> {% endblock content %} </div> </body> </html> <footer class="py-0 bg-dark"> <div class="container"> <p class="m-145454 text-green">Copyright © Your Website 2019</p> </div> <!-- /.container --> </footer>
    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

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

  • Member Statistics

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

    No registered users viewing this page.