Question

我有上面的导航栏代码。但是，我希望这个导航栏在我向下滚动时具有粘性并且不会移出屏幕。我尝试使用位置作为绝对和粘性，但在滚动时导航栏被留下了。请帮帮我。下面是导航栏的 css 代码：

    .header {
  overflow: hidden;
  background-color: #FFF;
  border-bottom: 1px solid grey;
}

input{    
margin-left: 40px;
    background: url(search.svg) no-repeat left;
    height: 40px;
    padding-left: 25px;
    width: 72%;
    border: 5px white;
}

.header a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 17px;
  padding-right: 30px;
  border-right: 1px solid grey;
}


#search-text-input{
    border-top:thin solid  #e5e5e5;
    border-right:thin solid #e5e5e5;
    border-bottom:0;
    border-left:thin solid  #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    float:left;
    height:17px;
    margin:.8em 0 0 .5em; 
    outline:0;
    padding:.4em 0 .4em .6em; 
    width:183px; 
}

#button-holder{
    background-color:#f1f1f1;
    border-top:thin solid #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    cursor:pointer;
    float:left;
    height:27px;
    margin:11px 0 0 0;
    text-align:center;
    width:50px;
}

#button-holder img{
    margin:4px;
    width:20px; 
}

<div class="header">
  <a><img src="logo.svg" class="logo"></a>
  <input type='text' placeholder='search..' id='search' />
  <img src="notification.svg" class="logo" style="padding-right: 10px;">
  <img src="user_1.svg" class="logo" style="padding-right: 10px;padding-top: 6px;width: 40px;height: 28px;">
</div>

在此处输入代码

Answer 1

position: fixed 是您要查找的属性！

您可以阅读文档 here

Answer 2

你能看看下面的代码吗？希望它对你有用。 position: sticky; 根据用户的滚动位置定位。借助此属性，您可以使标题在向下滚动时具有粘性。

请参考此链接：https://jsfiddle.net/yudizsolutions/7tsx3vra/

body {
  margin: 0;
}

.header {
  overflow: hidden;
  background-color: #FFF;
  border-bottom: 1px solid grey;
  position: sticky;
  top: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

input {
  margin-left: 40px;
  background: url(search.svg) no-repeat left;
  height: 40px;
  padding-left: 25px;
  width: 72%;
  border: 5px white;
}

.header a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 17px;
  padding-right: 30px;
  border-right: 1px solid grey;
}

#search-text-input {
  border-top: thin solid #e5e5e5;
  border-right: thin solid #e5e5e5;
  border-bottom: 0;
  border-left: thin solid #e5e5e5;
  box-shadow: 0px 1px 1px 1px #e5e5e5;
  float: left;
  height: 17px;
  margin: .8em 0 0 .5em;
  outline: 0;
  padding: .4em 0 .4em .6em;
  width: 183px;
}

#button-holder {
  background-color: #f1f1f1;
  border-top: thin solid #e5e5e5;
  box-shadow: 1px 1px 1px 1px #e5e5e5;
  cursor: pointer;
  float: left;
  height: 27px;
  margin: 11px 0 0 0;
  text-align: center;
  width: 50px;
}

#button-holder img {
  margin: 4px;
  width: 20px;
}

<div class="header">
  <a><img src="https://via.placeholder.com/52x42" class="logo"></a>
  <input type='text' placeholder='search..' id='search' />
  <img src="https://via.placeholder.com/36" class="logo" style="padding-right: 10px;">
  <img src="https://via.placeholder.com/36" class="logo" style="padding-right: 10px;padding-top: 6px;width: 40px;height: 28px;">
</div>
<div class="text-content">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <img src="https://via.placeholder.com/350" alt="placeholder-img">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <img src="https://via.placeholder.com/350" alt="placeholder-img">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
</div>

创建粘性/绝对导航栏

2 个答案: