Shrinking navigation bar when scrolling down (bootstrap3)

Question

I would like to build a navigation-bar effect like it is on http://dootrix.com/ on my page (after scrolling down the bar getting smaller and the logo changes). Im using boot

Answer 1

For those not willing to use jQuery here is a Vanilla Javascript way of doing the same using classList:

function runOnScroll() {
    var element = document.getElementsByTagName('nav')  ;
    if(document.body.scrollTop >= 50) {
        element[0].classList.add('shrink')
    } else {
        element[0].classList.remove('shrink')
    }
    console.log(topMenu[0].classList)

};

There might be a nicer way of doing it using toggle, but the above works fine in Chrome