Sorry, but I am a plete noob with JS. I am using Bootstrap to try build my first website. The website has a fixed top navbar. I want to change the navbar's border-bottom properties when it reaches the bottom of the header div (about 480/500px down the page). Currently the border-bottom is white, but I want to change it to blue when scrolled beyond a certain point (bottom of header) and then change back to white if scrolled back up again. The effect I want is the appearance of the fixed nav 'picking up' the bottom border of the banner section when it scroll's past. I have given the navbar div an id of id="n1", and created a class .navbar1{border-bottom: 1px solid rgba(46,152,255,1)!Important;} to add to override the existing css.

I am not using jQuery because I don't use much JS and I don't want to call it just for a few things - it is a big file. I have tried various things without any success. Probably because they relied on jQuery? I don't know. For example, the last one was:

$(window).scroll( function(){
    if($(window).scrollTop() > 50) $("n1").addClass("navbar1");
    else $("n1").removeClass("navbar1");    
});

Anyway, I was hoping someone may be able to help me with the plain/pure JS to change the attribute properties as described. Thank you in advance for any assistance.

EDIT:

This has been kindly answered below. But given some ments, I thought it might be useful to clarify my use of JS: My website requires very little JS functionality so I have chosen to inline my JS, rather than call an external JS file or files - such as jquery.js and bootstrap.js which are relatively large files.

Although I lose the benefit of caching the JS, and my HTML is slightly larger, I am happy to do that because in my case I feel those losses are more than made up for the increased initial page load speed from:

• not having to make additional http requests,
• not having to load relatively large files.

It is certainly not for everyone, but I feel that it suits my case. Having said that, when all is done and my website is up and running I will probably do some testing to see whether a custom external JS file is better again. Basically, I am only using Bootstrap for its CSS functionality, not its JS functionality. I hope that makes sense.

Sorry, but I am a plete noob with JS. I am using Bootstrap to try build my first website. The website has a fixed top navbar. I want to change the navbar's border-bottom properties when it reaches the bottom of the header div (about 480/500px down the page). Currently the border-bottom is white, but I want to change it to blue when scrolled beyond a certain point (bottom of header) and then change back to white if scrolled back up again. The effect I want is the appearance of the fixed nav 'picking up' the bottom border of the banner section when it scroll's past. I have given the navbar div an id of id="n1", and created a class .navbar1{border-bottom: 1px solid rgba(46,152,255,1)!Important;} to add to override the existing css.

I am not using jQuery because I don't use much JS and I don't want to call it just for a few things - it is a big file. I have tried various things without any success. Probably because they relied on jQuery? I don't know. For example, the last one was:

$(window).scroll( function(){
    if($(window).scrollTop() > 50) $("n1").addClass("navbar1");
    else $("n1").removeClass("navbar1");    
});

Anyway, I was hoping someone may be able to help me with the plain/pure JS to change the attribute properties as described. Thank you in advance for any assistance.

EDIT:

This has been kindly answered below. But given some ments, I thought it might be useful to clarify my use of JS: My website requires very little JS functionality so I have chosen to inline my JS, rather than call an external JS file or files - such as jquery.js and bootstrap.js which are relatively large files.

Although I lose the benefit of caching the JS, and my HTML is slightly larger, I am happy to do that because in my case I feel those losses are more than made up for the increased initial page load speed from:

• not having to make additional http requests,
• not having to load relatively large files.

It is certainly not for everyone, but I feel that it suits my case. Having said that, when all is done and my website is up and running I will probably do some testing to see whether a custom external JS file is better again. Basically, I am only using Bootstrap for its CSS functionality, not its JS functionality. I hope that makes sense.

• javascript
• html
• jquery
• css

• the code in your example uses jquery, bootstrap plugins/ponents require jquery. – atmd Commented May 7, 2015 at 9:10
• In a few words: you want to add a class to an element with bare JavaScript? – user16538 Commented May 7, 2015 at 9:10
• But surely bootstrap depends on jQuery anyway? – Sam Redway Commented May 7, 2015 at 9:10
• 3 @NaveenNiraula No it's not impossible, the OP wants pure JavaScript. I think people forget that jQuery IS A PLUGIN BUILT ON JAVASCRIPT – Mathew Thompson Commented May 7, 2015 at 9:14
• 1 @NaveenNiraula, what do you think jQuery is, Magic? – Stephan Bijzitter Commented May 7, 2015 at 9:14

2 Answers 2

This demo may help you! It doesn't use jQuery.

Here is the javascript code:

window.onscroll = function() {
    var nav = document.getElementById('nav');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("navbar1");
    } else {
        nav.classList.remove("navbar1");
    }
}

I did a small change on @radonirina-maminiaina amazing answer.

While it works, I do prefer avoiding doing unnecessary DOM calls during the onScroll event. The onScroll event can be triggered quite often on some devices, so it's best to keep its handler as fast as possible.

In my solution, I cache the nav DOM element on a closure and I only update its classes if the offset changes.

window.onscroll = function () {
  let isScrolled = false
  const scrollPoint = 100
  const nav = document.getElementById('navbar')

  function onScroll () {
    if ( window.pageYOffset > scrollPoint && !isScrolled ) {
      nav.classList.add("scroll");
      isScrolled = true
    } else if (window.pageYOffset <= scrollPoint && isScrolled) {
      nav.classList.remove("scroll");
      isScrolled = false
    }
  }
  
  onScroll()  // Makes sure that the class is attached on the first render
  return onScroll
}()