向下滚动 500 像素后如何将菜单设置到页面顶部

Question

我使用引导程序版本 3。
当我向下滚动时，我希望我的菜单栏设置在页面顶部。

截图：

加载时的起始页在中心显示我的徽标，在徽标底部显示我的菜单栏。
页面高度500px
我的菜单鳕鱼：

<div class="navbar-inverse navbar-default navbar-static-top" role="navigation" > <!-- منو بالا -->
    <div class="container my-menubar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <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="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">صفحه اصلی</a></li>
                <li><a href="#about">محصولات</a></li>
                <li><a href="#contact">درباره ما</a></li>
                <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> خدمات <span class="caret"></span></a>
                    <ul class="dropdown-menu my-menubar" role="menu">
                        <li><a href="#">خدمات 1</a></li>
                        <li><a href="#">خدمات 2</a></li>
                        <li><a href="#">خدمات 3</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse --> 
    </div>
    <!-- /container --> 
</div>

请看下面的链接：

http://chuckagency.com/wordpress-new/

我想这样创作。

Answer 1

在类下面添加两个属性

.navbar-static-top {
    top: 0px;
    position: fixed;
}

Answer 2

向下滚动后，您可以使用如下所示的一些 javascript 在菜单中添加一个类。

var listval = $('.section-nav-bar-menu')[0].offsetTop;   

    $(document).scroll(function() {     

        var topval = $(document).scrollTop();         
            if(topval >= listval){  
               $('.section-nav-bar-menu').addClass('fixed');  
            } else {  
               $('.section-nav-bar-menu').removeClass('fixed');  
            }  

    });  

});

然后您可以使用 CSS 使用“固定”类将菜单栏固定到页面顶部。

这段代码可能有很多不同的实现方式，所以环顾四周，看看哪种方式最适合您...

Answer 3

$(window).scroll(function () {      

    if ($(window).scrollTop() >= 450) {
        if ($('.navbar-default').hasClass('navbar-static-top')){
            $('.navbar-default').removeClass('navbar-static-top');
            $('.navbar-default').addClass('navbar-fixed-top');
        }
    }
    else {
        if ($('.navbar-default').hasClass('navbar-fixed-top')){
            $('.navbar-default').addClass('navbar-static-top');
            $('.navbar-default').removeClass('navbar-fixed-top');
        }
    }

});