诀窍是使用“top：-1像素”。
示例类：

.table-header {
  position: sticky;
  top: -1px;
}

你不能简单地使用HTML和CSS，你也应该使用JavaScript来保持标题在滚动时的粘性。

// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
};
// Get the navbar
var header = document.getElementById("Navbar");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position.
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

/* Style the header */

.navbar {
  padding: 5px;
  background: #555;
}

/* Page content */

.content {
  padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent as the header gets a new position at the top of the page (position:fixed and top:0) */

.sticky+.content {
  padding-top: 102px;
}

<div class="top-container">
  <p>Logo</p>
</div>
<div class="navbar" id="Navbar">
  <h2>your navigation bar</h2>
</div>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
    voluptatibus.
  </p>
</div>