Can anyone explain why my Z-Index isn't working as expected?

Hi I'm trying to create a "sticky" navigation bar, however the content further down the page appears over the top of the navigation bar after scrolling. I've tried applying z-indexes to the navigation but not sure why it isn't working. Any help would be much appreciated!

HTML

        <!-- Start Header -->
    <header classs="parallax">
        <section id="stickynav">
            <div class="container-responsive">
                <div class="row">
                    <div class="col-lg-4">
                        <h1>Title</h1>
                    </div>
                    <div class="col-lg-6">
                        Content
                    </div>
                    <div class="col-lg-2">
                        Content
                    </div>
                </div>
            </div>
        </section>
    </header>
    <!-- End Header -->
    <!-- Start Main -->
    <section id="main">
        <div class="container">
            <h2>About Us</h2>
        </div>
    </section>
    <!-- End Main -->

CSS

header {
    width: 100%;
    height: 90%;
    background-image: url('../images/slider/accounting-banner.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    color: #fff;
}
section#stickynav {
    position: fixed;
    z-index: 9999;
    height: 12%;
    width: 100%;
    padding-top: 1%;
    padding-left: 2%;
    padding-bottom: 1%;
    padding-right: 2%;
}
.stickystyle {
    background-color: #FFF;
    -webkit-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    color: #000;
}
section#main {
    margin-top: -2.5%;
    position: relative;
    z-index: -1;
}

JS

<script>
    var sn = $("#stickynav");
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) {
            sn.addClass("stickystyle");
        } else {
            sn.removeClass("stickystyle");
        }
    });
</script>

Thanks in advance