Navbar rozwijany

pytanie zadane 13 lutego 2022 w HTML i CSS przez trixter310 Obywatel (1,440 p.)

Witam mam taki navbar i mam pytanie czy da się zrobić tak, żeby menu-active po włączeniu go i zjechaniu na dół strony zostało przyklejone do góry

a nie jeździło razem z zjeżdzaniem strony oto kod:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="inner-width">
        <a href="#" class="logo"><img src="logo.png" alt=""></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Home</a>
          <a href="#"><i class="fas fa-align-left about"></i> About</a>
          <a href="#"><i class="fab fa-buffer works"></i> Works</a>
          <a href="#"><i class="fas fa-users team"></i> Team</a>
          <a href="#"><i class="fas fa-headset contact"></i> Contact</a>
        </nav>
      </div>
    </header>

    <script type="text/javascript">
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
    </script>
  </body>
</html>

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
}

.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}

.logo{
  float: left;
  padding: 20px 0;
}

.logo img{
  height: 50px;
}

.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:700px) {
  .menu-toggle-btn{
    display: block !important;
  }

  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 90px;
    right: 0;
    display: none;
    padding: 20px 40px;
    box-sizing: border-box;
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{
    display: block;
  }
}

komentarz 13 lutego 2022 przez Mezeon Obywatel (1,550 p.)

Chodzi Ci o to, aby element header nie przewijał się razem z całą zawartością strony, a zostawał cały czas u góry okna?

komentarz 13 lutego 2022 przez trixter310 Obywatel (1,440 p.)

w sensie nawigacja zostaje do góry w swoim miejscu ale w momencie gdy otwieram

menu-togle-button to wtedy on jeździ ze stroną

1	komentarz 13 lutego 2022 przez Mezeon Obywatel (1,550 p.) edycja 13 lutego 2022 przez Mezeon W takim razie dodaj do klasy active style position: sticky i top: 0. Wtedy elementy z nią będą miały takie zachowanie.

komentarz 13 lutego 2022 przez VBService Ekspert (246,010 p.)
edycja 13 lutego 2022 przez VBService

style position: sticky i top: 0

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="inner-width">
        <a href="#" class="logo"><img src="logo.png" alt=""></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Home</a>
          <a href="#"><i class="fas fa-align-left about"></i> About</a>
          <a href="#"><i class="fab fa-buffer works"></i> Works</a>
          <a href="#"><i class="fas fa-users team"></i> Team</a>
          <a href="#"><i class="fas fa-headset contact"></i> Contact</a>
        </nav>
      </div>
    </header>

    <p>
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
    </p>
    <p>
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
    </p>  

    <script type="text/javascript">
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
    </script>
  </body>
</html>

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
  position: sticky; /* dodane */
  top: 0; /* dodane */
}

.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}

.logo{
  float: left;
  padding: 20px 0;
}

.logo img{
  height: 50px;
}

.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:700px) {
  .menu-toggle-btn{
    display: block !important;
  }
  nav { /* dodane */
    box-shadow: none;  
    transition: box-shadow 0.8s;
  }
  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background-color: #172b4d;
    top: 90px;
    right: 0;
    display: block; /* zmiana */
    opacity: 0; /* dodane */
    padding: 20px 40px;
    box-sizing: border-box;
    transition: opacity 0.6s; /* dodane */
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{    
    opacity: 1; /* zmiana */
    box-shadow: -3px 3px 20px 3px black; /* dodane */
  }
}

p {
  height: 1000px;
}