Guide to ensuring the navbar remains at the top of the webpage following an image

Question

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the screen and adjusts dynamically based on the window size. Instead of setting a fixed point for the navbar to stick after scrolling a certain distance, I need a Javascript function that triggers the sticking effect when reaching the bottom of any element.

Here is the HTML:


    <header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

  <nav id = "nav_bar">
      <ul class = "navbar-list">
          <li>
              <a href="">link1</a>
          </li>
          <li class="dropdown">
              <a href="#" class="dropbtn">link2</a>
                  <div class="dropdown-content">
                      <a href="#">link 1</a>
                      <a href="#">link 2</a>
                      <a href="#">link 3</a>
                      <a href="">link 4</a>
                  </div>
          </li>
          <li>
              <a href="">link 3</a>
          </li>
          <li>
              <a href="">link4</a>
          </li>
      </ul>
  </nav>

<body>

<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>

<p>
  Lorem ipsum dolor...

CSS:

...

This updated version also includes a sample image overlapping the header for better visualization: codepen.io.

javascript jquery html css

Answer 1

Answer №1

Just like with the Tutorial Codepen, all you need to do is update the selectors in the example to match your own.

Give this a try:

var  mn = $("#nav_bar");
    mns = "navbar-fixed";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

Check out the codepen here

Important: When setting your navbar to sticky, keep in mind that the space where the navbar was will be removed. This may result in the navbar overlapping with your first line of text. To avoid this, remember to add padding to your header equal to the height of your navbar. You can do this in your javascript as well.

You can either add a class with this padding or manually adjust it. Here are some examples:

$('header').addClass("extraPadding"); // Create the extraPadding class

or

$('header').css("padding-bottom", "40"); // Use 40 as the height of your navbar

Answer 2

Just like with the Tutorial Codepen, all you need to do is update the selectors in the example to match your own.

Give this a try:

var  mn = $("#nav_bar");
    mns = "navbar-fixed";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

Check out the codepen here

Important: When setting your navbar to sticky, keep in mind that the space where the navbar was will be removed. This may result in the navbar overlapping with your first line of text. To avoid this, remember to add padding to your header equal to the height of your navbar. You can do this in your javascript as well.

You can either add a class with this padding or manually adjust it. Here are some examples:

$('header').addClass("extraPadding"); // Create the extraPadding class

or

$('header').css("padding-bottom", "40"); // Use 40 as the height of your navbar

Answer 3

Answer №2

Here is an example

var menu_top_offset = $('#menu').offset().top;

$(window).scroll(function() {
  if ($(this).scrollTop() > menu_top_offset) {
      $('#menu').addClass('fixed');
  } else {
    $('#menu').removeClass('fixed');
  }
});

body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
section{background:#fff}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn{
  background-color: blue;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: yellow;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.fixed{
  position:fixed;
  top:0;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

<nav id="menu">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>;
 <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>

  <p>
    Lorem ipsum dolor sit...etc...
  </p>

Answer 4

Here is an example

var menu_top_offset = $('#menu').offset().top;

$(window).scroll(function() {
  if ($(this).scrollTop() > menu_top_offset) {
      $('#menu').addClass('fixed');
  } else {
    $('#menu').removeClass('fixed');
  }
});

body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
section{background:#fff}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn{
  background-color: blue;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: yellow;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.fixed{
  position:fixed;
  top:0;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

<nav id="menu">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>;
 <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>

  <p>
    Lorem ipsum dolor sit...etc...
  </p>

Answer 5

Answer №3

let navigation = $('.adjustlink');
    let position = navigation.offset().top;

    $(window).scroll(function (){
        let fixPosition = ($(this).scrollTop() > position) ? true : false;
        navigation.toggleClass("fixed-navigation", fixPosition);
    });

Here is a helpful resource for you JSFiddle Example

Answer 6

let navigation = $('.adjustlink');
    let position = navigation.offset().top;

    $(window).scroll(function (){
        let fixPosition = ($(this).scrollTop() > position) ? true : false;
        navigation.toggleClass("fixed-navigation", fixPosition);
    });

Here is a helpful resource for you JSFiddle Example

Answer 7

Answer №4

I believe the solution you are aiming for is this. Hopefully, it will assist you. Click on the Run code snippet button to see it in action.

To achieve the desired effect of fixing an element while scrolling, you need to add a class called fixed when you reach that specific element and remove it when scrolling back up.

var navBarOffset = $('#nav_bar').offset().top;

$(window).scroll(function() {
  var navBar= $('#nav_bar');
  var scroll = $(window).scrollTop();

  if (scroll >= navBarOffset ) {
    navBar.addClass('fixed');
  } else {
    navBar.removeClass('fixed');
  }
});

body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
.fixed {
  position: fixed;
  top:0; 
  left:0;
  width: 100%; 
}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
</header>

<nav id="nav_bar">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>

Answer 8

I believe the solution you are aiming for is this. Hopefully, it will assist you. Click on the Run code snippet button to see it in action.

To achieve the desired effect of fixing an element while scrolling, you need to add a class called fixed when you reach that specific element and remove it when scrolling back up.

var navBarOffset = $('#nav_bar').offset().top;

$(window).scroll(function() {
  var navBar= $('#nav_bar');
  var scroll = $(window).scrollTop();

  if (scroll >= navBarOffset ) {
    navBar.addClass('fixed');
  } else {
    navBar.removeClass('fixed');
  }
});

body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
.fixed {
  position: fixed;
  top:0; 
  left:0;
  width: 100%; 
}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
</header>

<nav id="nav_bar">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>

Guide to ensuring the navbar remains at the top of the webpage following an image

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for manually looping an HTML5 video on iOS 4.3/5?

Using only HTML, I have created a collapsible accordion in Angular without the need for JS code. However, when I click the button, nothing happens. Can you help me resolve

Javascript recursive function calling itself

Troubleshooting overlap problem between Skrollr and SlickNav

Internet Explorer is unable to recognize the .less file format

Updating Vue.js Component Data

Included adaptable background-images in the upload

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

Retrieve the input value from a Bootstrap Form Input

Leveraging Web Services in Outlook Mail Add-On

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Guidance on loading JSON array information into highcharts using AngularJS

Guide on encrypting data on the server with PHP and decrypting it on the client side using JavaScript

`Upkeeping service variable upon route alteration in Angular 2`

Tips for transferring information to an input field's value

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method

The AngularJS component materializes almost instantaneously

Exploring ways to incorporate various classes into my validate() elements using jQuery

Is Jade monitoring *.jade files?

React - Unable to perform 'removeChild' on 'Node' object: The specified node cannot be removed as it is not a child of this node