javascript - 导航栏未出现在滚动条上

Question

我从主题森林下载了 he mix responsive app landing page theme 并且在我开始删除不需要的部分之前，我一直在很好地定制它。自从删除后，标题不再像它应该的那样出现，在页面加载时隐藏并在滚动时出现。

这是它过去的样子:http://mixdesigns.net/themes/mix/HTML/right-mobile-layout/light/gray-bg/index.html .

我很确定它与 javascript 有关，但我在该领域的技能有限。

HTML:

<!-- Header -->
        <header>
            <nav class="navbar navbar-custom navbar-top navbar-fixed-top sticky-navigation" role="navigation">
                <div class="container-fluid">
                    <a class="page-scroll btn-new btn-bold pull-right" href="#download">Download </a>
                    <div class="navbar-header page-scroll">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <!-- LOGO -->
                        <a class="navbar-brand nav-logo" href="#page-top">
                            <img src="images/headerlogo.png" height="28" width="40" alt="mix"/>
                        </a>
                    </div>
                    <!-- NAVIGATION LINKS -->
                    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a class="page-scroll" href="#page-top">Home</a></li>
                            <li><a class="page-scroll" href="#firstFeature">Features </a></li>
                            <li><a class="page-scroll" href="#team">Team</a></li>
                            <li><a class="page-scroll" href="#contact">Contact</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->

                </div><!-- /.container -->
            </nav>
        </header><!-- Header end -->

CSS:

/* Header and nav --------------------------------------------------- */
.sticky-navigation {
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-bottom: 1px solid #222;
    padding:5px 0 !important;
    margin-bottom: 0 !important;
    -webkit-backface-visibility: hidden;
    top: -100px;


}
.nav-logo{
    padding: 0px 15px;
    height: 50px;
    margin-top: 15px;
    overflow: hidden;
}
.nav-logo:focus{
    outline: none;
}
.navbar{
    margin-bottom: 0px;
}
.navbar-nav {
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navbar-nav li a {
    padding: 10px;
    line-height: 30px;
    font-size: 14px;
    color: #aaa;
    position: relative;
    background: transparent !important;
    font-weight: 700;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.navbar-nav li a:focus{
    outline: none;
}
.navbar-nav li.active a,.navbar-nav li a:hover {
    color:#Eb2629;
}
header .btn-new{
    padding: 8px 18px;
    font-size: 12px;
    margin: 6px 0px 6px 10px;
}
.navbar-toggle{
    padding: 5px 10px;
    margin-right: 10px;
}

Answer 1

从链接中我可以看出，动画代码似乎来自该插件

// Scroll Plugin
$(window).scroll(function () {
    var secondFeature = $('#secondFeature').offset().top;
    var scroll = $(window).scrollTop();
    if (scroll >= 600) {
        $('.sticky-navigation').animate({"top": '0', "opacity": '1'}, 0);
    } else {
        $('.sticky-navigation').animate({"top": '-100', "opacity": '0'}, 0);
    }
    if (scroll >= secondFeature - 200) {
        $(".mobileScreen").css({'background-position': 'center top'});
    }
    return false;
});

基本上，只要滚动窗口达到 600px 以上，它就会将“粘性导航”下拉，反之亦然，当它小于 600px 时。

只要 nav 有 sticky-navigation 类，它就可以工作。如果这不是您需要的，请详细说明。