CSS/html Position:sticky не работает для меня

Я пытаюсь сделать липкий заголовок. У меня есть логотип, и ниже я хочу создать панель навигации, которая должна быть липкой. Я не использую JavaScript, просто хотел использовать position:sticky в CSS. Я попробовал это на других образцах кода, и это сработало, однако по какой-то причине это не работает на веб-сайте, который я создаю. Я прочитал несколько советов (убрать overflow:hidden, убрать фиксированную высоту в родительском теге и т.д.). Это все еще не работает для меня. Не могли бы вы взглянуть на мой код и предложить решение? большое спасибо!

HTML:

<html lang = "pl" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <title>Title</title>
  </head>
  <body>
      <div>
            <div class = "logo">
                <img src = "logo_m2.png" class = "logo_img">
            </div>
            <div class = "nav-row">
                <div class = "main-nav">
                    <ul>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                    </ul>
                </div>
                <div class = "main-social">
                    <ul>
                        <li>F</li>
                        <li>U</li>
                        <li>I</li>                    
                    </ul>
                </div>
            </div>
      </div>
      <div class = "section">
              <div class = "posts">
                    post
              </div>
              <div class = "r-panel">
                   r-panel
              </div> 
      </div>
      <footer>
        footer
      </footer>
  </body>
</html>

CSS:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    color:#2d3436;
    width: 100%;
    padding:40px;
    padding-top: 0;

}

.logo{
    border-bottom-style: solid;
    border-width: 1.5px;
 }

.logo_img {
    display:block;
    margin-right: auto;
    margin-left: auto;
    width:50%;
    height: auto;
}

nav-row {
    margin: 5px;
    height: 40px;
    border: solid;
    position: sticky;
    top:0;
    }

.main-nav{
    float:left;
}

.main-social{
    float:right;
}

.main-nav li {
    display:inline-block;
}


.main-social li{
    display: inline-block;

}

.section {
    margin-top: 10px;
    height:1000px;
    border-style:dotted;
    }

.posts{
    border-color:red;
    border-style: solid;
}



footer {
    border-top: solid;
    border-color: #3c3c3c;
    height: 50px;
    }

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

— 01.02.2019 21:05

html css sticky

01.02.2019 20:45

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

4 141

Ответы 1

Это работает. Я удалил ненужные родительские div. Я показал вам, где я удалил в HTML.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  color:#2d3436;
  width: 100%;
  padding:40px;
  padding-top: 0;

}

.logo{
  border-bottom-style: solid;
  border-width: 1.5px;
}

.logo_img {
  display:block;
  margin-right: auto;
  margin-left: auto;
  width:50%;
  height: auto;
}

.nav-row {
  margin: 5px;
  height: 40px;
  border: solid;
  position: sticky;
  top:0;
}

.main-nav{
  float:left;
}

.main-social{
  float:right;
}

.main-nav li {
  display:inline-block;
}


.main-social li{
  display: inline-block;

}

.section {
  margin-top: 10px;
  height:1000px;
  border-style:dotted;
}

.posts{
  border-color:red;
  border-style: solid;
}



footer {
  border-top: solid;
  border-color: #3c3c3c;
  height: 50px;
}

<html lang = "pl" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <title>Title</title>
  </head>
  <body>
     <!-- I removed this <div> -->
            <div class = "logo">
                <img src = "logo_m2.png" class = "logo_img">
            </div>
            <div class = "nav-row">
                <div class = "main-nav">
                    <ul>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                        <li><a href = "#">btn1</a></li>
                    </ul>
                </div>
                <div class = "main-social">
                    <ul>
                        <li>F</li>
                        <li>U</li>
                        <li>I</li>                    
                    </ul>
                </div>
            </div>
      <!-- I removed this </div> -->
      <div class = "section">
              <div class = "posts">
                    post
              </div>
              <div class = "r-panel">
                   r-panel
              </div> 
      </div>
      <footer>
        footer
      </footer>
  </body>
</html>

Но я не знаю, почему это не работало раньше :)

— 01.02.2019 20:54

проверьте это, почему: stackoverflow.com/a/52997848/8620333

— 01.02.2019 21:04

01.02.2019 20:52