Nicholas Van Son Nicholas Van Son - 10 months ago 38
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.


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)