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;
});

基本上任何时候滚动窗口达到600px以上都会使“粘性导航”下降，反之则低于600px。

只要导航器具有粘性导航类，这应该可以工作。如果这不是你需要的，请详细说明。

导航栏不显示在滚动上

1 个答案: