NavBar Start Position Mid Web-CodePudding

im new at HTML, CSS and Bootstrap.

What im looking for is a way to make the navbar fixed only in a portion of the web.

A cleary example is this web:

You can see that the navbar starts at "Profile" section and doesnt go upper than that.

Is there a css or bootstrap way to do it?

Thanks

    <body>
    <div class="jumbotron intro">
        <div class="container-fluid intro-image">
            <div class="row">
                <div class="col-lg-12">
                    <img src="/imagenes/fondo6.jpg" class="imagen">
                    <h1>Ariel Curuchaga</h1>
                    <hr class="dotted-line" style="border-top: dotted 5px">
                    <p class="intro-paragraph">Interactive Resume</p>
                    </img>
                </div>
            </div>
        </div>
    </div>

    <div>
        <nav id="navbar" class="navbar navbar-inverse barra" role="navigation">
            <ul class="list-group">
                <li class="list-group-item list-group-item-action list-group-item-dark"><i class="fas fa-arrow-circle-up"></i>
                </li>
                <li class="list-group-item list-group-item-action list-group-item-dark">Profile</li>
                <li class="list-group-item list-group-item-action list-group-item-dark">Experience</li>
                <li class="list-group-item list-group-item-action list-group-item-dark">Education</li>
                <li class="list-group-item list-group-item-action list-group-item-dark">Goals</li>
            </ul>
        </nav>
        <div class="profile">
            <h2>About Me</h2>
        </div>
        <div class="experience">
            <h2>About Me</h2>
        </div>
        <div class="education">
            <h2>About Me</h2>
        </div>
        <div class="goals">
            <h2>About Me</h2>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>


    .imagen {
    height: 100vh;
    width: 100vw;
    margin: 0;
    filter: opacity(0.4) drop-shadow(0 0 0 pink);
}

.intro {
    position: relative;
    margin: 0;
    text-align: center;
}

.intro-image {
    padding: 0;
}

h1 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sawarabi Mincho', sans-serif;
    font-weight: 700;
    font-size: 60px;
    letter-spacing: 8px;
}

.dotted-line {
    position: absolute;
    width: 32%;
    top: 50%;
    left: 32%;
    color: #6b6e6e;
    margin: 0;
    padding: 0;
}

.intro-paragraph {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 30px;
}

.barra {
    border-radius: 30%;
    padding: 0;
    opacity: 80%;
    position: sticky;
    top: 0;
    z-index: -1;
}

.list-group {
    text-align: center;
}

.profile {
    background-color: yellowgreen;
    height: 100vh;
    width: 100vw;
}

CodePudding user response：

You can use sticky positioning:

#navBar {
    position: sticky;
    top: /*distance from top of page*/
}

This makes the element in question follow normal page order until it is reached, then it becomes fixed. However, keep in mind that it is not supported by IE.

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-left: 140px; /* Same width as the sidebar   left position in px */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>  

</body>
</html>