Scroll Class - add classes on scroll

js.js

//ex on signals defense

    var header = $(".header");
    
    $(window).scroll(function() {
        
        var scroll = $(window).scrollTop();
        
        if (scroll >= 1) {
            header.addClass('small');
        } else {
            header.removeClass('small');
        }
        
    });

// css below

body.home .header {
    position: fixed;
    top: 0px;
    @include bp(1000px) {
        position: relative;
        padding: 15px 0px 0px;
    }
}

body.admin-bar .header {
    position: fixed;
    top: 32px;
    @include bp(1000px) {
        position: relative;
        padding: 15px 0px 0px;
        top: 0;
    }
}

.header {
    width: 100%;
    margin: 0 auto;
    z-index: 999;
    padding: 0px 0px 0px;
    transition: all 300ms ease-in-out;
    position: fixed;
    background: rgba(0,74,139,0.5);
    @include bp(1000px) {
        position: relative;
        padding: 15px 0px 0px;
        background: rgba(0,74,139,0.91);
    }
    .header-left {
        float: left;
    }
    .header-right {
        float: right;
        padding-top: 40px;
    }
    .logo {
        float: left;
        margin-top: 7px;
        img {
            height: 72px;
            width: auto;
            max-height: 300px;
            transition: all 200ms ease-in-out;
        }
        @include bp(1000px) {
            text-align: center;
            display: block;
            float: none;
        }
    }
    .phone {
        color: #000;
        font: 16px $font1;
    }
    .email {
        color: #000;
        font: 16px $font1;
        a {
            color: inherit;
        }
    }
    .social {
        float: right;
        text-align: center;
        i {
            font-size: 18px;
            display: inline-block;
            margin-left: 5px;
        }
    }
}

.header.small {
    background: rgba(0,74,139,1);
    .logo img {
        height: 45px;
        width: auto;
        @include bp(1000px) {
            height: auto;
        }
    }
    nav#primary-navigation {
        margin-top: 16px;
    }
    nav#primary-navigation>ul>li>a {
        padding: 0px 8px 20px;
        @include bp(1000px) {
            padding: 10px 8px 10px;
        }
    }
}

.header:hover, body:not(.home) .header {
    background: rgba(0,74,139,1);
}