一旦我滚动标题上的高度，尝试进行粘性导航

Question

我不明白为什么这不起作用。我试图在用户滚动标题上的长度后将此导航栏固定在顶部。

在我的控制台中，我收到了这些错误。不知道这与它有什么关系。

＆＃34;未捕获的TypeError：undefined不是函数＆＃34;

＆＃34;无法加载资源：net :: ERR_CACHE_MISS＆＃34;

文档正确加载，因为我已经尝试过console.log并且正在吐出信息。

非常感谢任何帮助。

谢谢！

HTML

<header>

</header>

<?php get_template_part( 'navigation' ); ?>

<div class="default-bg">

<div class="container">

    <section class="hello-welcome">

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <p><?php the_content(); ?></p>

        <?php endwhile; else: ?>

            <p>There are no posts or pages here.</p>
        <?php endif; ?>

    </div><!--- End hello-welcome --->
</div><!--- end default-bg --->

CSS

body {
    margin: 0;
    padding-top: 950px;
}

header {
    background: url("images/main-banner.jpg");
    background-size: cover;
    height: 940px;
    position: fixed;
    top: 0;
    width: 100%;
}

.nav, .container {
    position: relative;
}

.nav-scrolled, header {
    position: fixed;
    top: 0;
    width: 100%;
}

.default-bg {
    background: #ffffff;
    background: url("images/body-bg.jpg");
    position: relative;
    overflow: hidden;
}

.nav {
    background: url("images/nav-bg.png");
    height: 87px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.20);
    -moz-box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.20);
    box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.20);
    z-index: 150;
}

JAVASCRIPT

var  mn = $(".nav");
mns = "nav-scrolled";
hdr = $('header').height();

$(window).scroll(function() {
    if( $(this).scrollTop() > hdr ) {
        mn.addClass(mns);
    } else {
        mn.removeClass(mns);
    }
});