Nicholas Van Son Nicholas Van Son - 1 year ago 69
CSS Question

How to make nav at bottom stick to top

I am not very experienced in jQuery so I have been struggling with what I have been trying to accomplish recently.

I want a nav that is at the bottom of the window to stick when it reaches the top.

What it should look like before and after scrolling.

I have tried methods like:

var stickyNavTop = $('nav').offset().top;

$(window).scroll(function() {
if ($(window).scrollTop() > stickyNavTop) {
else {

Here is the entire HTML and CSS

Any help is much appreciated, thank you.

Answer Source

All you need to do is check the offset top of your element you want to check is at the top of the screen. If it is we then simply add a new class which has fixed position and top 0;

jsFiddle :

$(function() {
  var distance = $('.navbar').offset().top,
    $window = $(window);

  $window.scroll(function() {
  $('.navbar').toggleClass('fixedtop', $window.scrollTop() >= distance)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download