首页htmlheaderPage Widget - 如何在滚动时固定标题

Page Widget - 如何在滚动时固定标题

我们想知道如何在滚动时固定标题。

<html>
<head>
<style>
div.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  padding: 20px;
  font-size: 28px;
  color: #ffffff;
  background-color: #666666;
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
}

p {
  width: 300px;
  padding: 5px;
  color: #000000;
  background-color: #FFFFFF;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

p.one {
  margin-top: 100px;
}
</style>
</head>

<body>
  <div class="header">Beginning Web Programming</div>
  <p class="one">This page has to contain several paragraphs so you
    can see the effect of fixed positioning. Fixed positioning has been
    used on the header so it does not move even when the rest of the page
    scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
  <p>This page has to contain several paragraphs so you can see the
    effect of fixed positioning. Fixed positioning has been used on the
    header so it does not move even when the rest of the page scrolls.</p>
</body>
</html>