Question

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

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

.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;
 }

Answer 1

要使用position: fixed;，您需要为要附加的元素定义一个位置。假设您希望它在视口的顶部，那将是top: 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;
 }

如何使用屏幕HTML进行<div>滚动？

1 个答案: