时间戳

首页 > 解决方案 > 向右滚动时如何防止元素移动？

html - 向右滚动时如何防止元素移动？

问题描述

所以我把右边的页眉和页脚做了一个固定的位置。当我上下滚动时，它工作得很好，但是当我向右滚动时，元素也会向右移动，这是我不想要的。我只是希望这些元素保持在垂直位置，后面有蓝色背景。

body {
  background-image: url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80);
  background-repeat: no-repeat;
  background-position: 90% 5%;
  background-size: 100%;
}

.profile-image {
  width: 200px;
  height: 200px;
  position: relative;
  left: 750px;
  top: 300px;
  border: 7px solid #A9A9A9;
  border-radius: 200px;
  transition: transform 1s;
}

.profile-image:hover {
  transform: rotate(360deg);
  transition: transform 1s;
}

.name span {
  color: orange;
  position: relative;
}

.name {
  position: relative;
  left: 550px;
  top: 330px;
  font-size: 50px;
  color: white;
  font-family: 'Lexend Zetta', sans-serif;
}

.header-background {
  background-color: #000033;
  height: 500rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 18rem;
}

hr {
  color: #3d3d5c;
  left: 0;
  position: fixed;
  top: 6rem;
  width: 17.9rem;
}

.header-links a {
  color: #cccfc2;
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  padding: 1.5rem;
  position: relative;
  left: 1rem;
  bottom: 4rem;
  text-decoration: none;
  text-transform: uppercase;
}

.header-links {
  position: fixed;
}

.header-links a:hover {
  color: orange;
}

.footer-side-links a {
  color: white;
  padding: 0.3rem;
}

.footer-side-links a:hover {
  color: orange
}

.footer-side-links {
  left: 3rem;
  position: fixed;
  top: 50rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap" rel="stylesheet">
  <script src="https://use.fontawesome.com/82c7176f2a.js"></script>
</head>

<body>
  <div class="profile">
    <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile picture">
    <figcaption class="name">JOHN <span>JOHNSON</span></figcaption>
  </div>
  <div class="header-background">
  </div>
  <div class="wrapper">
    <hr>
    <header>
      <nav class="header-links">
        <a href="#Home">Home</a>
        <a href="#About">About</a>
        <a href="#Projects">Projects</a>
        <a href="#Contact">Contact</a>
      </nav>
    </header>
    <footer>
      <nav class="footer-side-links">
        <a href="https://www.linkedin.com/in/parham-javadi/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        <a href="https://www.instagram.com/papar24/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="https://github.com/pjfooeve09" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
      </nav>
    </footer>
  </div>
</body>
</head>

</html>

标签： htmlcss

解决方案

如果我理解正确。您必须添加位置：固定；在 .header-background 类中

.header-background {
    background-color: #000033;
    height: 500rem;
    left: 0;
    top: 0;
    width: 18rem;
    position: fixed; /* <-------- */
}

回复评论以删除水平滚动条：尝试用下面的这些替换类：.profile .profile-image .name 和 .header-links。我希望这对你有用。

.profile {
  text-align: center;
  margin-left: 290px;
  margin-top: 250px;
}

.profile-image {
  width: 200px;
  height: 200px;
  position: relative;
  border: 7px solid #A9A9A9;
  border-radius: 200px;
  transition: transform 1s;
}

.name {
  position: relative;
  font-size: 50px;
  color: white;
  font-family: 'Lexend Zetta', sans-serif;
}

.header-links {
  position: fixed;
  top: 300px;
}

推荐阅读