How to make the menu go to the top using Bootstrap?

Asked

Viewed 136 times

0

I see on many sites like this that at the start of the scrolling the Menu goes to the top and when it is at the top it is at its place of origin (as if it were floating). How I apply this effect?

javascript jquery css twitter-bootstrap
  • 1

    When the screen scroll exceeds a certain limit (the one that would cause the menu to exceed the top of the screen) change the class of the div that contains the menu: 1) make the menu have position: fixed and top: 0px; 2) add (or make visible) a div empty to occupy the space that the menu occupied (without this, the scrolling would make a "jump"). This can be done in pure JS, but maybe jQuery and/or Bootstrap have easier ways to do this (if by tomorrow nobody gives a better answer, I put more details in the way I usually do).

1 answer

2

A simple way to add this effect is through Javascript, see the example below:

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > 50) {
    $('.menu').addClass('fixed');
  } else {
    $('.menu').removeClass('fixed');
  }
});

This answer is based on an answer in Stackoverflow international. See the example in jsfiddle.

Browser other questions tagged javascript jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.