jquery - 将 Bootstrap Navbar 修复到滚动顶部

Question

1. 我在页面顶部有一个 div (named=status bar)，其 height = 25px、top:0 和 位置:固定。
2. 我想在此状态栏下方放置一个 Bootstrap 导航栏(具有透明背景)100px。
3. 当页面滚动时，navbar 会滚​​动并触摸状态栏，并且: 3.1.固定在状态栏下方。 3.2.将其背景颜色更改为红色 (#ff0000)。 3.3.页面的其余部分向下滚动。
4. 当页面向上滚动时，导航栏和状态栏的位置保持固定，直到滚动几乎到达浏览器顶部。
5. 到达浏览器顶部时，状态栏将保持在#1 中的位置。 导航栏 滚动并设置在距状态栏 100px 的位置。

HTML(状态栏)

<div class="genxcoders-status-bar">     <div class="genxcoders-left genxcoders-fc-white genxcoders-fw-500">
        <span id="genxcoders-date"></span>
    </div>
    <div class="genxcoders-center">
        Support: <i class="fa fa-phone"></i> +91-712-606 GENX
    </div>
    <div class="genxcoders-right">
        <ul class="genxcoders-status-bar-social">
            <a href="#"><li><i class="fa fa-facebook-f"></i></li></a>
            <a href="#"><li><i class="fa fa-twitter"></i></li></a>
            <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
            <a href="#"><li><i class="fa fa-youtube-play"></i></li></a>
        </ul>
    </div> </div> 

HTML(导航栏)

<div class="nav-container" id="navigation">
        <div id="genxcoders" class="navbar navbar-default " role="navigation">
            <div class="container-fluid">
                <div class="navbar-header"><a class="navbar-brand" href="#">BlueGas</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navbar-menubuilder">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="/">Home</a></li>
                        <li><a href="/about-us">About Us</a></li>
                        <li class="dropdown">
                            <a href="/products" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Services</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

CSS(状态栏)

/* 状态栏 */

.genxcoders-status-bar {    width: 100%;    height: 25px;       background-color: #1976d2;      position: fixed;    top: 0;     z-index: 9999; }

.genxcoders-status-bar > .genxcoders-left, .genxcoders-status-bar > .genxcoders-center, .genxcoders-status-bar > .genxcoders-right {    width: 33.33%;  height: 25px;   line-height: 25px;      font-size: 12px;        float: left;        text-align: center;     color: #ffffff; }

.genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social {  list-style: none;   margin-left:
-30px; } .genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social > a > li {    color: #ffffff;     display: inline-block;  margin: auto 10px; } 

/* 状态栏 */

CSS 导航栏 /* 应用栏 */

.nav-container {    margin-top:100px;       width: 100%;    height: 50px;
         } .nav-container > #genxcoders.navbar-default .navbar-brand {
    color: rgba(33, 33, 33, 1); } .nav-container > #genxcoders.navbar-default {
    font-size: 15px;
    /*background-color: rgba(255, 255, 255, 1);*/   background-color: transparent;
    border-width: 0px;
    border-radius: 0px; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a {
    color: rgba(33, 33, 33, 1);
    /*background-color: rgba(255, 255, 255, 1);*/   background-color: transparent; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(3, 169, 244, 1); } .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(25, 118, 210, 1); } .nav-container > #genxcoders.navbar-default .navbar-toggle {
    border-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus {
    background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle .icon-bar {
    background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover .icon-bar, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff; }

/* 应用栏 */

<强> FIDDLE

Answer 1

您的 fiddle 存在许多问题，其中一些问题比其他问题更严重:

• 您正在通过 http:// 而不是 https:// 加载 jQuery，并且 jsFiddle 会阻止它。
• 您正在检查 window.scrollTop() 与 #navigation.offset() 但您更改了 #navigation 的 offset( ) 使用 CSS ，它会导致栏在状态之间闪烁。将其与硬值进行比较，例如 100px(当未固定时，它是 #navigation 的边距顶部，因此它可以按预期工作。
• 您在 scroll() 函数之外定义了 var elementPosition，因此它不会在滚动时更新
• 您的 .scroll() 函数太重了。只需将一个类(fixed？)附加到 #navigation 并将所有 CSS 放入 #navigation.fixed { } 声明中，在您的CSS。我还没有在更新的 fiddle 中完成最后一点，但我强烈推荐它。
• 您的 CSS 选择器太强大了。仅使用足够强大的选择器来应用，而不是更强。例如，您可以使用以下方式设置 .navbar-brand 的样式:

 .nav-container > #genxcoders.navbar-default .navbar-brand {}

...，但你只需要一个比

更强的选择器

.navbar-default .navbar-brand {}

您可以分别使用 #navigation .navbar-brand {} 和:
#navigation.fixed .navbar-brand {}。

您的 updated fiddle 。