Question

好吧，我在Google上搜索了我找到的anwser this 用于在滚动条上创建固定/粘性标头。我要进行更改，这将在div (div classes: w3-panel w3-card)中起作用。 .sticky类有top:0;，我不确定如何将其更改为div。

我拥有的代码是这样的：

我要在其中放入所有内容的div：

.cardDivInfo{
   width: 68.7%;
   min-width: 500px;
   float: left;
   margin-left: 16px;
   height: 505px;
   overflow-y: scroll;  
}

我在W3Schools中发现的答案：（有点不同）：

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

当然还有HTML：

<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>

JavaScript：

    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");
  }
}

Answer 1

您要做的只是将sticky样式应用于元素。这是让您的#myHeader保持粘性的方法：

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

只需确保周围有<div>：

<div class="w3-panel w3-card-4 cardDivInfo">
    <div class="header" id="myHeader">...</div>
</div>

html-固定的滚动标题

1 个答案: