如何使用屏幕HTML进行滚动？[英]How do I make a scroll with the screen HTML? 本文翻译自  Matt  查看原文  2016-12-05  31    css/

I am trying to get a top block to stay in the same position on the page as I scroll up/down. Other questions similar to this one suggest position: fixed; would solve the issue but it doesn't. Any suggestions? Thanks

当我向上/向下滚动时，我试图让一个顶部块保持在页面上相同的位置。与此类似的其他问题表明立场：固定;会解决问题，但事实并非如此。有什么建议么？谢谢

HTML

HTML

<div class="topBorder boxShadow">

 <h1><b>Matt</b></h1>

<ul class="nav nav-pills pillStyle">
 <li role="presentation" class="active">
 <a href="#">ABOUT</a></li>
 <li role="presentation">
 <a href="#">PORTFOLIO</a></li>
 <li role="presentation">
 <a href="#">CONTACT</a></li>
  </ul>

</div>

CSS

CSS

.topBorder {
  background-color: #00b6ff;
  height: 90px;
  padding-top: 1px;
  -webkit-box-shadow: 0 0 8px 0 black;
  position: fixed;
 }

 h1 {
  font-family: 'Rubik'
  color: white;
  padding-top: 4px;
  padding-left: 100px;
  margin-bottom: 0px;
  float: left;
 }

 .pillStyle {
  font-family: 'Ubuntu';
  font-size: 18px;
  padding-top: 23px;
  padding-left: 660px;
  float: left;
 }

1 个解决方案

#1

To use position: fixed; you need to define a place for the element to be affixed to. Assuming you want it against the top of your viewport, that would be top: 0;.

使用位置：固定;你需要为要贴的元素定义一个位置。假设你想要它在视口的顶部，那将是顶部：0;。

.topBorder {
  background-color: #00b6ff;
  height: 90px;
  padding-top: 1px;
  -webkit-box-shadow: 0 0 8px 0 black;
  position: fixed;
  top: 0;
  z-index: 10;
 }