Twitter bootstrap 3 在向下滚动500像素后，如何将菜单设置为页面顶部

我使用引导版本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>

切换导航










导航标题

请留意以下连结：

---

我想这样创建。

在类下面添加两个属性

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

---

在向下滚动足够长的时间后，可以使用一些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使用“fixed”类将菜单栏固定到页面顶部

---

这段代码可能有许多不同的实现方式，所以请四处看看，看看什么最适合您……

亲爱的paulalexandru。谢谢你的帮助。你能做到这两点吗？问：1.当在笔记本电脑中打开菜单时，菜单会贴在页面底部。向下滚动时，将其粘贴在第2页的顶部。这同样适用于移动设备和漂亮的显示。您可以看到演示：我已经在您的页面上进行了测试，这段代码可以完美地满足您的需要。这里是您的完美解决方案。

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

    });  

});