首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >修复网站菜单栏

修复网站菜单栏
EN

Stack Overflow用户
提问于 2013-05-29 02:57:15
回答 1查看 5.9K关注 0票数 0

好吧,我一直在为自己创建一个视差滚动网站,但我不知道如何制作固定的菜单栏。

我希望菜单栏出现在网站的2/3部分,当用户滚动通过该页面,我希望它成为固定的页面顶部,因为他们向下滚动页面的其余部分。如果我的术语很糟糕,我很抱歉,如果它有帮助,我希望菜单栏的功能与这个网页上的完全一样。

所以基本上我不知道如何在css中做到这一点,所以如果有人可以帮助,那就太好了。

http://alwayscreative.net/

谢谢:)

EN

回答 1

Stack Overflow用户

发布于 2013-05-29 03:06:50

THIS能把你带到正确的方向吗?或ANOTHER one

代码语言:javascript
复制
<div class="header"><strong>Header</strong></div>
<div class="nav"><strong>Navigation Bar</strong></div>
<div class="content"></div>
<style>
body{
    margin: 0;
}
.header{
    height: 50px;
    background-color: #000;
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding-top: 3%;
}
.nav{
    height: 30px;
    background-color: #D7D7D7;
    font-size: 16px;
    text-align: center;
    color: #000;
    padding-top: 5px;
    width: 100%;
}
.content{
    height: 1200px;
}
</style>

Js:

代码语言:javascript
复制
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        var scrollTop = 90;
        if($(window).scrollTop() >= scrollTop){
            $('.nav').css({
                position : 'fixed',
                top : '0'
            });
        }
        if($(window).scrollTop() < scrollTop){
            $('.nav').removeAttr('style');  
        }
    })
})</script>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16799404

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档