"Fixed" navbar yet disappearing

Question

I suffer (deeply..) from a problem with a navbar which disapearred when we scroll down, despite a classic css position:fixed assigned to its class.

I think it's due to some css I use for a parallax effect (which works as I wish) but I fail in finding where.

So how to keep the navbar/menu fixed? Thanks in advance!! Didier

This is the html/css code:

html {
  height: 100%;
  overflow: hidden;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {

  background: #eee;
    font-size: 16px;
    font-family: sans-serif,arial;

  height: 100%;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
}

.Para {

  box-sizing: border-box;
  min-height: 60vh;
  position: relative;
  transform-style: inherit;
}

.Para-img {
  content: "";
  position: absolute;
  display: block;
  background-image: url(https://cdn.imgpaste.net/2022/10/10/Kem93m.png);
  min-height: 100vh;
  width: 100%;
  margin-top: 100px;
  left: 0;
  right: 0;
  transform: 
    translateZ(-1px)
    scale(2);
  background-size: cover;
  background-position: center 30%;
  transform-origin: center bottom;
  z-index: -1;
}

section {
  position: relative;
  width: 100%;
  background-color: grey;
  height: 150vh;
  padding-top: 1em;
}

.content {
  position: relative;
  display: block;
  max-width: 75%;
  margin: auto;
}






/* menuCSS */

.nav{
  width: 100%;
  height: 60px;
 
  position: fixed;
  top: 0;
  z-index: 999
    
}

ul li{
    list-style: none;
    width: 200px;
    line-height: 60px;
    position: relative;
    background: #222;
    box-shadow: 0px 2px 5px 0px red;
    text-align: center;
    float: left;
    background-color: #010000;
  color: white;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>



<nav class="nav">
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Products</li>
        <li>About</li>
    </ul>
</nav>



<div class="Para">
  <div class="Para-img"></div>
</div>
<section>
<div class="content">
  <h1>Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
</section>



</body>
</html>

But your <nav> is fixed. So whats the issue. Do you want the menu bar to remain visible while the background images and text are scolled? Is that what you are looking for? — Raky
– Raky, Commented Oct 17, 2023 at 4:19

Raky · Accepted Answer · 2023-10-17 14:46:44Z

0

// Add a scroll event listener to control the parallax effect
window.addEventListener('scroll', function () {
  const scrollPos = window.scrollY;
  const paraImg = document.querySelector('.Para-img');
  paraImg.style.transform = `translateZ(-1px) scale(2) translateY(-${scrollPos * 0.5}px)`;
});

html {
  height: 100%;
  overflow: hidden;
}

body {
  padding: 0;
  margin: 0;
  background: #eee;
  font-size: 16px;
  font-family: sans-serif, arial;
  height: 100%;
  overflow-y: scroll;
}

.Para {
  box-sizing: border-box;
  min-height: 60vh;
  position: relative;
}

.Para-img {
  content: "";
  position: absolute;
  display: block;
  background-image: url(https://cdn.imgpaste.net/2022/10/10/Kem93m.png);
  min-height: 100vh;
  width: 100%;
  margin-top: 100px;
  left: 0;
  right: 0;
  transform: translateZ(-1px) scale(2) translateY(0);
  background-size: cover;
  background-position: center 30%;
  transform-origin: center bottom;
  z-index: -1;
}

section {
  position: relative;
  width: 100%;
  background-color: grey;
  height: 150vh;
  padding-top: 1em;
}

.content {
  position: relative;
  display: block;
  max-width: 75%;
  margin: auto;
}

.nav {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.9); 
  z-index: 999;
}

ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

li {
  background: #222;
  box-shadow: 0px 2px 5px 0px red;
  text-align: center;
  background-color: #010000;
  color: white;
  width: 100px;
  line-height: 60px;
  border-radius: 5px;
  transition: background 0.3s;
}

li:hover {
  background-color: #333;
}

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="nav">
    <ul>
      <li>Home</li>
      <li>Portfolio</li>
      <li>Products</li>
      <li>About</li>
    </ul>
  </nav>
  <div class="Para">
    <div class="Para-img"></div>
  </div>
  <section>
    <div class="content">
      <h1>Title</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
  <script src="script.js"></script>
</body>

The above approach has its own disadvantages. You would know when you try this.

edited Oct 17, 2023 at 14:46

answered Oct 17, 2023 at 4:23

Raky

9087 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Didier2791 Over a year ago

Hello. Thanks for your answer. I want the menu bar to remain visible while keeping the parallax effect my code enables. The changes you kindly propose actually keep the menu visible but suppress the parallax effect when scrolling.

Raky Over a year ago

Modified the code.... Check it out and tell me if it works the way you want it

Didier2791 Over a year ago

Still not. The picture scrolls the same speed as the text...so there is not the parallax effect I had in my code (without the fixed menu). But I'm cery grateful for your help.

Raky Over a year ago

Oh... Maybe my understanding of your parallax effect is incorrect. If you can explain in simple words what is expected in the result, then i may try again to achieve it.

Didier2791 Over a year ago

Hello... There are different parallax effects possible, but the one I want is the one the code I gave in my initial question enables . So I'd like to keep this very effect with a fixed menu... And thanks again!

Collectives™ on Stack Overflow

"Fixed" navbar yet disappearing

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related