Changing nav-bar color after scrolling?

by

Here is simplest way how to change navbar color after window scroll:

Add follow JS to head:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

and this CSS code

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Background color of fixed navbar will be change to white when scroll exceeds height of navbar.

See follow JsFiddle

More Related Contents:

  1. How to create a responsive image that also scales up in Bootstrap 3
  2. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  3. Bootstrap Dropdown with Hover
  4. How to resize Twitter Bootstrap modal dynamically based on the content
  5. Bootstrap Dropdown menu is not working
  6. How to have html popup appear over main html page?
  7. Write tags in HTML and print
  8. Change from (+) symbol to (-) after click (function(){
  9. How can i create html automatic change page? [duplicate]
  10. How to disable HTML links
  11. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  12. Refresh/reload the content in Div using jquery/ajax
  13. Animate element to auto height with jQuery
  14. How to style “input file” with CSS3 / Javascript? [duplicate]
  15. How do I detect “shift+enter” and generate a new line in Textarea?
  16. How to partition input field to appear as separate input fields on screen?
  17. :touch CSS pseudo-class or something similar?
  18. CSS3-Animate elements if visible in viewport (Page Scroll)
  19. Open a new javascript window(.open) along with its CSS styling
  20. Check if element is between 30% and 60% of the viewport
  21. How do I make a move up and down when I’m scrolling the page?
  22. How do I detect the inherited background-color of an element using jQuery/JS?
  23. Convert dropdown to selection boxes with color and trigger drop down action
  24. Placeholder for contenteditable div
  25. How to keep elements non-refreshed
  26. How do you swap DIVs on mouseover (jQuery)?
  27. Center an Image vertically and horizontally using CSS
  28. Change background on button click, using CSS only? [duplicate]
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment