Fixed secondary Nav bar after scrolling

I was looking through some of the posts and I found most my answer however it's still not working properly for me.

The bar you see on the jsfiddle should be catching lower than the top because there is a fixed header that will be there on my main site this secondary bar is supposed to go below it. I can get it to be fixed on jsfiddle but not on my site. And as you can see it is shrinking when it changes to fixed.

HTML:

<header>
    <img class="logo" src="images/headerLogo.png">
    <p class="about lighter">ABOUT US</p>
    <p class="contact lighter">CONTACT US</p>
    <img class="getStarted" src="images/getStarted.png">
</header>

<div class="mainSection1">
    <h1>SAVE TIME & MONEY</h1>
    <h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>

    <p>$79.99 VALUE<br>FREE FOR YOUR CLIENTS</p>

    <img class="getStarted" src="images/getStarted.png">
</div>

<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>

JS:

var nav = $('.subBar');
if (nav.length) {
    var fixmeTop = nav.offset().top -100;
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop) {
            $('.subBar').css({
                position: 'fixed',
                width: '100%',
                top: '73px',
                left: '0'
            });
            $('header').css(
                    'box-shadow', 'inherit'
            );
        } else {
            $('.subBar').css({
                position: 'static'
            });
            $('header').css(
                    'box-shadow', '0px 5px 9px #515151'
            );
        }
    });
}

css:

.subBar {
    background: #F1F1F2;
    height: 65px;
}

.subBar p:first-child {
    margin-left: 15%;
    border-left: 1px solid #bbbdc0;
}

.subBar p {
    float: left;
    border-right: 1px solid #bbbdc0;
    width: 17%;
    text-align: center;
    height: 44px;
    margin-top: 0px;
    padding-top: 21px;
    font-weight: lighter;
}

Solution

Issue has been solved! I decided to make a second navbar that starts hidden than is shown when I scroll down enough. It seems to be way less jumpy and isn't taking the original bar out of the dom (which messes with other elements below it).