Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How do I get this scroll effect on my navbar

Edrol97

Bronze Coder
Hi all, wondering how to make a navbar in two sections sticky. I only want the navbar section of it to be sticky. Video attached of what I want

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Solution
To make only the navbar section sticky, you can apply a CSS class with position: sticky and top: 0 to that specific element. Ensure that no parent elements have overflow set to hidden, as this can interfere. You might also want to set z-index for layering. :blush:
Solved- thanks! I managed to figure it out!
is this what you was after 🙂


Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Navbar Example</title>
  <!-- Bootstrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .top-section {
      height: 150px;
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .content {
      padding: 50px;
      height: 2000px; /* For scrolling effect */
    }
  </style>
</head>
<body>

  <div class="top-section">
    <h1>Welcome to the Top Section</h1>
    <p>This section scrolls out of view as you scroll down.</p>
  </div>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Sticky Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="content">
    <h2>Scroll Down to See the Sticky Navbar</h2>
    <p>This content area is here to demonstrate the scrolling effect.</p>
    <p>Keep scrolling to see how the navbar sticks to the top of the page.</p>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
 
is this what you was after 🙂


Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Navbar Example</title>
  <!-- Bootstrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .top-section {
      height: 150px;
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .content {
      padding: 50px;
      height: 2000px; /* For scrolling effect */
    }
  </style>
</head>
<body>

  <div class="top-section">
    <h1>Welcome to the Top Section</h1>
    <p>This section scrolls out of view as you scroll down.</p>
  </div>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Sticky Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="content">
    <h2>Scroll Down to See the Sticky Navbar</h2>
    <p>This content area is here to demonstrate the scrolling effect.</p>
    <p>Keep scrolling to see how the navbar sticks to the top of the page.</p>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Yes, except for the colour, but how would I change this in the relevant Bootstrap stylesheet?
 
I don't use bootstrap. And won't, if I can help it, but that's neither here nor there. If the sample code from @simong1993 works, then it appears you can add the necessary CSS for what you need in addition to BS. No?
 
I don't use bootstrap. And won't, if I can help it, but that's neither here nor there. If the sample code from @simong1993 works, then it appears you can add the necessary CSS for what you need in addition to BS. No?
I've kind of found a semi-solution except ideally I would like to move the nav bar forward. I've tried doing this with the z-index on css to no avail, and wonder if you may have a solution. Pics below to show what I have
 

Attachments

  • Screenshot 2024-10-09 at 15.48.31.png
    Screenshot 2024-10-09 at 15.48.31.png
    81.3 KB · Views: 2
  • Screenshot 2024-10-09 at 15.48.42.png
    Screenshot 2024-10-09 at 15.48.42.png
    77 KB · Views: 2
  • Screenshot 2024-10-09 at 15.48.52.png
    Screenshot 2024-10-09 at 15.48.52.png
    42.9 KB · Views: 2
The container that you wish to have become stuck to the top of the viewport must be the container that gets position:sticky;. It looks to me like you have position:sticky; on the elements above your navbar. You would need something along these lines:

[wrapper]
[topper]
[navigation position:sticky;]
[content]
[/wrapper]

The element with position:sticky; must be in a wrapper with enough height to allow it to become 'stuck'.
 
The container that you wish to have become stuck to the top of the viewport must be the container that gets position:sticky;. It looks to me like you have position:sticky; on the elements above your navbar. You would need something along these lines:

[wrapper]
[topper]
[navigation position:sticky;]
[content]
[/wrapper]

The element with position:sticky; must be in a wrapper with enough height to allow it to become 'stuck'.
So would I wrap it in a larger div for this and define the div's height and width as so:

CSS:
.wrapperdiv {
width: 100%
height: 20%
}

.wrapperdiv .navbar {
height: 10%
}
 
So would I wrap it in a larger div for this and define the div's height and width as so:

CSS:
.wrapperdiv {
width: 100%
height: 20%
}

.wrapperdiv .navbar {
height: 10%
}

I'm not sure why you would define a height at all, unless there is no content on the page. .navbar height should be whatever height it needs for links and padding etc. You would rarely define a height on anything except images.
 
Here is a quick sample:


body was given a large height to simulate a lot of content and to allow scrolling.
OK, I've tried working with this quite a bit, and i'm not sure how to make it so that there is little space on top below the navigation bar but still the sticky nav stays at the top all the way down. At the moment, it's disappearing as soon as the body text comes to the top of the screen. Do you know a fix to this?
 
It would be easier with a link to inspect, but it sounds like the nav is not a child of the wrapper. Note the structure of my sample. The stuck element needs to be a child of the scroll-able wrapper. Scroll-able because of the amount of content.

Edit:
The stuck element has to be a child of a container that has enough content to scroll.
 
<main> is outside of the wrapper. Currently, nav will only stay stuck as long as wrapper is in the viewport. Since all the page content is outside of wrapper, it scrolls away.

CleanShot 2024-10-10 at 09.05.53.png

Also, you don't need shouldn't have a height on the wrapper other than maybe 100vh (so you can force a footer to always be at the bottom of the viewport).
 
Last edited:
<main> is outside of the wrapper. Currently, nav will only stay stuck as long as wrapper is in the viewport. Since all the page content is outside of wrapper, it scrolls away.

View attachment 2814

Also, you don't need shouldn't have a height on the wrapper other than maybe 100vh (so you can force a footer to always be at the bottom of the viewport).
I can't seem to get it to work in the way you have it. It's either too much of a distance between div class title-text1 or doesn't scroll beyond the text. I'll ask my coding tutor if he has any ideas for tomorrow. Thanks for your help though!
 
I believe everything you need is in this screenshot:


Note the structure changes (everything is INSIDE .wrapper) and the Changes panel (far right) for CSS fixes. I was able to get it working just be dragging things in the inspector and tweaking CSS in the inspector.
 
To make only the navbar section sticky, you can apply a CSS class with position: sticky and top: 0 to that specific element. Ensure that no parent elements have overflow set to hidden, as this can interfere. You might also want to set z-index for layering. :blush:
 
To make only the navbar section sticky, you can apply a CSS class with position: sticky and top: 0 to that specific element. Ensure that no parent elements have overflow set to hidden, as this can interfere. You might also want to set z-index for layering. :blush:
Solved- thanks! I managed to figure it out!
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom