导航栏未出现在滚动条上

Question

我从主题林中下载了他混合响应式应用程序着陆页主题，并且自定义它之前做得很好，直到我开始删除不需要的部分。 自从删除以来，标题不再出现应有的样子，在页面加载时隐藏并在滚动显示。

这是以前的用途： 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;
});

基本上，每当滚动窗口达到高于600像素时，它就会将“粘滞导航”放下，而当滚动窗口小于600像素时，反之亦然。

只要导航具有粘性导航类，它就应该起作用。 如果这不是您所需要的，请详细说明。