html - 我无法让特定的 div 停止滚动页面(我希望它留在一个地方)

尽管位置固定且没有转换属性，但我的“英雄”div 始终随页面移动。我希望它留在原地

.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;

  margin-top: 60px;
}

完整的CSS:

*
{
  margin: 0;
  padding: 0;
}

header
{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),  url(img/snow.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;

}

.main-nav
{
  float: right;
  list-style: none;
  margin-top: 30px;


}

.main-nav li{
  display: inline-block;
}

.main-nav li a{
  color:white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", "sans-serif";

}

.main-nav li.active a{
  border: 1px solid white;
}

.main-nav li a:hover{
  border: 1px solid white;
}

.logo img
{
  width: 150px;
  height: auto;
  float: left;
}

body
{
  font-family: monospace;
}

.row
{
  max-width: 1200px;
  margin: auto;
}

.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;

  margin-top: 60px;
}

h1{
  color: white;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  /* margin-top: 275px; */

  margin-top: 220;
}

.button
{
  margin-top: 30px;
  margin-left: 440px;

  position: sticky;
}

.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
  position: sticky;
}

.btn-one{
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
  position: sticky;
}
.btn-two{
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}

html,body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;

}

#page_2{

  height: 1000px;
  background-color: red;

  }

完整的 HTML:

<html>

<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>


  <header>

    <div id="page_1">

<div id="particles-js">


  <div  class="row">
    <!-- <div class ="logo">
      <img src="https://i.imgur.com/0PyA8HR.png" alt="">
      </div> -->

    <ul class="main-nav">
      <li class ="active"> <a href="index.html">HOME</a> </li>

              <li> <a href="about.html">ABOUT</a> </li>
                <li> <a href="">PORTFOLIO</a> </li>
      </ul>
      </div>



        <div class="hero">

        <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>

        <div class="button">
          <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one"  target="_blank"> LINKEDIN </a>
          <a href="" class="btn btn-two"> RESUME </a>
</div>

<div class ="bro">

</div>

        </div>


</div>

  </header>



      <!--particles js file -->

<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>

<div id=page_2>

</div>

</body>




</html>

最佳答案

您的结束标记嵌套不正确似乎存在问题。在结束 header 标记之前需要另一个结束 div。该片段显示了固定位置的英雄:

.hero {
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}

Full css: * {
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", "sans-serif";
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 150px;
  height: auto;
  float: left;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.hero {
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  /* margin-top: 275px; */
  margin-top: 220;
}

.button {
  margin-top: 30px;
  margin-left: 440px;
  position: sticky;
}

.btn {
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
  position: sticky;
}

.btn-one {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two {
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two:hover {
  background-color: darkorange;
  transition: all 0.5s ease-in;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;
}

#page_2 {
  height: 1000px;
  background-color: red;
}

<header>

  <div id="page_1">

    <div id="particles-js">


      <div class="row">
        <!-- <div class ="logo">
      <img src="https://i.imgur.com/0PyA8HR.png" alt="">
      </div> -->

        <ul class="main-nav">
          <li class="active"> <a href="index.html">HOME</a> </li>
          <li> <a href="about.html">ABOUT</a> </li>
          <li> <a href="">PORTFOLIO</a> </li>
        </ul>
      </div>



      <div class="hero">

        <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>

        <div class="button">
          <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one" target="_blank"> LINKEDIN </a>
          <a href="" class="btn btn-two"> RESUME </a>
        </div>

        <div class="bro">

        </div>

      </div>


    </div>

  </div>

</header>



<div id=page_2>

</div>

关于html - 我无法让特定的 div 停止滚动页面(我希望它留在一个地方)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56860215/

html - 我无法让特定的 div 停止滚动页面(我希望它留在一个地方)

完整的CSS:

上一篇：javascript - 将 cookie 设置为每个 session 只显示一次 DIV

下一篇：css - 如果列表样式位置设置为内部，如何防止列表项在元素符号后立即中断？