Javascript Tips

var element = document.getElementById('element');
element.classList.add('class-1');
element.classList.add('class-2', 'class-3');
element.classList.remove('class-3');

document.getElementById("navbar").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "35px";

(function () {
    var lastScroll = 0;

    window.onscroll = function() {
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        var navbar = document.getElementById("navbar");

        if (currentScroll > 80) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }

        if (currentScroll > 300 && lastScroll <= currentScroll){
            navbar.classList.add('unpinned');
        }else{
            navbar.classList.remove('unpinned');
        }

        lastScroll = currentScroll;
    };
})();

#navbar.scrolled {
    background-color: #fff;
    margin-top: 15px;
}
#navbar.scrolled .navbar-nav > li > a {
    color: #337ab7;
}
#navbar.scrolled #logo {
    stroke: #337ab7!important;
}
#navbar.unpinned {
    transform: translateY(calc(-100% - 5px));
}