So I made the header and footer on the right a fixed 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.
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; in the.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. 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
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.