How to Fix the Bootstrap Navbar to the Top After a Div Was Scrolled

How can I fix the bootstrap navbar to the top after a div was scrolled?

This answer is no longer correct. Please see @zim's answer below.

Fix Bootstrap Navbar to top on scrolling

There are a number of problems with your fiddle, some more serious than others:

• you are loading jQuery over http:// instead of https:// and jsFiddle blocks it.
• you are checking window.scrollTop() against #navigation.offset() but you change #navigations offset() using CSS and it causes the bar to flicker between states. Compare it to a hard value, like 100px (which is the margin top of your #navigation when it's not fixed, so it works as intended.
• you define var elementPosition outside the scroll() function, so it doesn't get updated on scroll
• your .scroll() function is way too heavy. Just append a class (fixed?) to #navigation and place all of the CSS inside a #navigation.fixed { } declaration, in your CSS. I haven't done this last point in the updated fiddle, but I highly recommend it.
• your CSS selectors are way too strong. Only use selectors that are strong enough to apply, not stronger. For example, you style your .navbar-brand using:

 .nav-container > #genxcoders.navbar-default .navbar-brand {}

..., but you only need a selector stronger than

.navbar-default .navbar-brand {}

You could just use #navigation .navbar-brand {} and, respectively:

#navigation.fixed .navbar-brand {}.

Your updated fiddle.

Bootstrap. Scroll link menu and fix the navbar at the top of the page

Set up the affix plugin

You need to use the affix plugin. It's a standard Bootstrap component.

This plugin makes the block fixed when the page is scrolled on the data-offset-top pixels:

Pixels to offset from screen when calculating position of scroll.

So you don't need to use the .navbar-fixed-top class. But you have to set some CSS properties for fixed navbar by the .navbar.affix class:

• The top: 0; property sets the vertical position of the fixed navbar;

• Properties left: 0; right; 0; force the navbar to expand to the width of the screen.

Avoid of page jumping

When the navbar becomes fixed it loses its space on the page. You've got two troubles at this moment:

• A text below the navbar jumps up and hides under the navbar.

• Page height decreases. If it becomes less than the height of the window, the page scrolls down and the plugin returns the navbar to its place. It looks as if the navbar does not allow the page to go up.

So you need a CSS trick. Add margin-bottom to the block before the navbar and add negative margin-top to the navbar. The value of both margins must be equal to the height of the unfixed navbar.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.above {  margin-bottom: 70px;}.navbar {  margin-top: -70px;}.navbar.affix {  margin-top: 0 !important;  left: 0;  right: 0;  top: 0;}

<div class="container above">  <h1>Hello</h1></div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="70">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <div id="navbar" class="navbar-collapse collapse">      <ul class="nav navbar-nav navbar-right">        <li class="active"><a href="">Link 1</a></li>        <li><a href="">Link 2</a></li>        <li><a href="">Link 3</a></li>      </ul>    </div>  </div></nav>  
<div class="container">  <p>Paragraph 1.</p><p>Paragraph 2.</p><p>Paragraph 3.</p>  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

React Bootstrap Sticky Navbar which slides down after scrolling past header

Like the answer from Akber (which has a full edit queue) but this one fits the condition that the NavBar slides in and out, and lets you assign a shadow to the Navbar. The line of importance for removing or adding the NavBar based on page position is const pos = window.pageYOffset;

import React, {useState, useEffect} from 'react'
import './style.css'

const TopBar = () => {
  const [isHidden, setIsHidden] = useState(false);

  const hideBar = () => {
    const pos = window.pageYOffset;
    pos > 120 ? setIsHidden(true) : setIsHidden(false) 
  }

  useEffect(() => {
    window.addEventListener("scroll", hideBar, { passive: true });

    return () => {
      window.removeEventListener("scroll", hideBar);
    };
  }, []);

  let classHide=isHidden?"hide":""
  return <div className={`topbar ${classHide}`}>topbar</div>;
}

export default TopBar

CSS

.topbar{
  position: fixed;
  height:40px;
  left:0;
  top:0;
  background-color: #fff;
  width:100%;
  text-align:center;
  font-size:22px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  transition:top .3s;
}

.hide{

  top:-40px
}

Bootstrap navbar stick to top on scroll

Just add a class to the navbar on scroll:

<nav class="navbar navbar-default navbar-fixed-top">

So you just add the class navbar-fixed-top and it will stay right where you want it.

You can do that in jQuery very simply by running:

if (//scroll position reached) {
  $('nav').addClass(navbar-fixed-top)
}

Documentation here: https://getbootstrap.com/components/#navbar-fixed-top

---

Related Topics