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

Question

我使用bootstrap ver 3.
当我向下滚动时，我希望我的菜单栏设置在页面顶部。

截图：

加载时的开始页面在中心显示我的徽标＆amp;我的菜单栏位于徽标底部 页面高度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');
        }
    }

});