Editing scroll over Div

问题内容:

I am trying to create a site where my title div is fixed in one position as i scroll down. only problem is that as i make it fixed, my navigation button on the left disappears and i don’t know how to make it stay where it is.

@charset "utf-8";

/* CSS Document */

* {
  margin: 0 px;
  padding: 0 px;
  font-family: sans-serif;
}

# navside {
  position: fixed;
  width: 200 px;
  height: 100 %;
  background: #fb6542;
  left: -200 px;
  transition: all 250 ms linear;
}

# navside.active {
  left: 0 px;
}

# navside ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15 px 10 px;
  border-bottom: 3 px solid #7d4427;
}

# navside.toggle - btn {
  position: absolute;
  left: 230 px;
  top: 20 px;
}

#navside.toggle - btn span {
  display: block;
  width: 30 px;
  height: 5 px;
  background: #375e97;
  margin: 5px 0px;
}

# title {
  margin: 0 px;
  padding: 0 px;
  width: 100 %;
  height: 90 px;
  background: #ffbb00;
}

#title h1 {
  text-align: center;
  line-height: 80 px;
  color: #3f681c;
}

# photoslide {
  margin: 0 px;
  padding: 0 px;
  width: 100 %;
  height: 400 px;
  background: #375e97;
}

# info1 {
  top: 500 px;
  padding: 0 px;
  width: 100 %;
  height: 2000 px;
  background: #ef2341;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
<div id="navside">
  <div class="toggle-btn" onClick="togglesidebar()">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <li>Home</li>
    <li>Home</li>
    <li>Home</li>
    <li>Home</li>
    <li>Home</li>
  </ul>
</div>
<div id="title">
  <h1>Flavour Dome</h1>
</div>
<div id="photoslide"></div>
<div id="info1"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="footer"></div>

Now how do i edit my code in such a way that the title div, info1 div and my navside button remain in one place while i scroll?

问题评论:

答案:

答案1:

You need to use position:fixed; along with top, right, bottom and left on each element you want to “remain in one place.” Where top, right, bottom and left value are in pixels.

答案评论:

原文地址:

https://stackoverflow.com/questions/47756652/editing-scroll-over-div

Tags:,

添加评论