简体   繁体   English

向右滚动时如何防止元素移动?

[英]How do I keep elements from moving when I scroll to the right?

So I made the header and footer on the right a fixed position.所以我将 header 和右侧的页脚固定为 position。 When I scroll up and down, it works perfectly fine, but when I scroll to the right, the elements move to the right as well, and that's something I don't want.当我上下滚动时,它工作得很好,但是当我向右滚动时,元素也会向右移动,这是我不想要的。 I just want those elements to stay in a vertical position with the blue background behind it.我只想让这些元素保持在垂直的 position 中,后面是蓝色背景。

 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>

If I understood right.如果我理解正确。 You must add position: fixed;您必须添加 position:已修复; in the.header-background class在.header-background class

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

Reply to comment to remove the horizontal scroller: Try to replace the classes: .profile.profile-image.name and.header-links with these below.回复评论以删除水平滚动条:尝试用下面的这些替换类:.profile.profile-image.name 和.header-links。 I hope this works for you.我希望这对你有用。

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

You have to use parent div position as fixed instead of individual element Disable horizontal scroll using overflow-x:hidden您必须使用父 div position作为fixed而不是单个元素使用overflow-x:hidden禁用水平滚动

.wrapper{
 height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 18rem; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  }

 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: 40%; 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: 27%; top: 14px; 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 { width: 63%; margin-left: auto; margin-right: auto; }.wrapper{ height: 100%; /* Full-height: remove this if you want "auto" height */ width: 17%; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ left: 0; background-color: #111; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 20px; }.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 { width: 34%; margin-left: auto; margin-right: auto; }.container{ width: 83%; overflow-x: hidden; margin-left: 282px; }
 <.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="wrapper"> <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> <div class="container"> <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> </body> </head> </html>

Screenshot截屏

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 调整 web 浏览器的大小时,如何防止元素/图像移动? - How do I keep my elements/images from moving when I resize my web browser? 当用户放大或缩小时,网站元素变得混乱。 我如何阻止他们移动? - Website elements go haywire when the user zooms in or out. How do I keep them from moving? 如何防止我的桌子随着滚动而移动以及如何使其居中? - How do I prevent my table from moving with the scroll & How to keep it centered? 调整浏览器大小时如何阻止元素移动? - How do i stop elements from moving when resizing the browser? 如何让Javascript / JQuery不移动页面上的其他元素? - How do I keep Javascript/JQuery from moving other elements on the page? 如何防止 side 元素导致我的网站必须向右滚动 - How do I keep the aside element from causing my website to have to scroll to the right 放大和缩小时,如何防止视频div /容器/包装器移动? - How do I keep my video div/container/wrapper from moving when I zoom in and out? 当子导航下降时,如何防止链接向下移动? - How do I keep the links from moving down when the subnavigation drops down? 当隐藏HTML左边的HTML div时,如何保持HTML div不移动? - How do I keep an HTML div from moving when the one to its left is hidden? 如何防止我的内容区域移动 - How Do I Keep My Content Area From Moving
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM