如何添加粘贴标头

Question

我想创建一个带有粘性标题的网页，就像stackoverflow本身的标题一样。当我们滚动页面时，标题仍保持在其位置。我怎样才能做到这一点？

Answer 1

可以使用css属性position: fixed完成。

Answer 2

<nav class="navbar navbar-default navbar-fixed-top">

如果您使用的是bootstrap，那么您可以使用.navbar-fixed-top类来修复始终位于顶部。

Answer 3

这可能就是你要找的东西!!!

注意： Jquery和javascript仅用于滚动效果，而“只是坚持”效果可以通过使用HTML和{{1只有。

CSS

var  mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();

$(window).scroll(function() {
    if( $(this).scrollTop() > hdr ) {
        mn.addClass(mns);
    } else {
        mn.removeClass(mns);
    }
});

*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

Answer 4

只有HTML＆amp; CSS

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
}

.main {
    padding: 16px;
    margin-top: 30px;
    height: 1500px; /* Used in this example to enable scrolling */
}

<ul>
  <li><a href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
</ul>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>