html - фиксированный заголовок прокрутки

Хорошо, что я искал google для своего anwser, я нашел это для создания фиксированного / липкого заголовка в прокрутке. Я хочу внести изменения, и это будет работать внутри div .sticky. top:0;класс, и я не уверен, как это изменить, чтобы быть внутри div..cardDivInfo{ width: 68.7%; min-width: 500px; float: left; margin-left: 16px; height: 505px; overflow-y: scroll; }

Код, который у меня есть, выглядит примерно так:

В div я хочу разместить все содержимое внутри:

   .header {
     padding: 10px 16px;
     background: #555;
     color: #f1f1f1;
   }
   .content {
     padding: 16px;
    }
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    .sticky + .content {
      padding-top: 102px;
    }

Anwser, который я нашел в W3Schools: (немного другое):

<div class="w3-panel w3-card-4 cardDivInfo">
  <div class="header" id="myHeader">
    <h2>Header Text</h2>
  </div>
  <div class="content">
    <p>Text with many words<p>
    <p>Text with many words<p>
    <p>Text with many words<p>
    <p>......</p>
  </div>
</div>

и html, конечно:

    window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

JavaScript:

sticky

javascript,html,css,

0

Ответов: 1

1 принят

То, что вы хотите сделать, - это просто применить свой stickyстиль к вашему элементу. Вот как я сделал бы ваш #myHeaderлипкий:

#myHeader {
    position: sticky;
    top: 0;
 }

И просто убедитесь, что <div>вокруг него есть:

<div class="w3-panel w3-card-4 cardDivInfo">
    <div class="header" id="myHeader">...</div>
</div>
JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика