Я не могу получить определенный div, чтобы остановить прокрутку со страницей (я хочу, чтобы она оставалась в одном месте) - PullRequest
Новая
       40

Я не могу получить определенный div, чтобы остановить прокрутку со страницей (я хочу, чтобы она оставалась в одном месте)

0 голосов
/ 03 июля 2019

Несмотря на фиксированную позицию и отсутствие свойств преобразования, мой div "hero" всегда перемещается вместе со страницей.Я хочу, чтобы он оставался на месте 

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

Ответы [ 2 ]

1 голос
/ 03 июля 2019

Похоже, проблема с закрывающими тегами неправильно вложена. Там должен быть другой закрывающий 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>
0 голосов
/ 03 июля 2019

Использовать позицию: наследовать

Вы используете исправленный, и я думаю, что это вызывает вашу проблему.

Наследовать не будет, абсолютные стеки, фиксированные прокрутки со страницей, статические по умолчанию.

...