Question

我想制作类似this

的菜单栏

但逻辑上的东西有点难。＆GT;。＆LT;

我正在使用jquery脚本这是我的样本，它很糟糕...

HTML：

<html>
    <!--- to float menubar and stay on top animation XD --->
    <script src="jquery.min.js"></script>
    <script>
        var num = 200; //number of pixels before modifying styles
        $(window).bind('scroll', function () {
            if ($(window).scrollTop() > num) {
                $('.menu').addClass('fixed');

            } else {
                $('.menu').removeClass('fixed');
            }
        });
    </script>
    <style>
        .menu {
            background:#555555;
            color:#FFF;
            height:50px; 
            position:absolute;
            top:200px;
            border-bottom: 10px solid #e6e6ce;
            width:1100px;
            margin-left:100px;
            margin-right:100px;
        }
        .fixed {
            position:fixed;
            top:0;
        }
    </style>
    <div class="menu">
        Home &nbsp about &nbsp 
    </div>

Answer 1

您可能还想look at this。我个人认为这个jQuery解决方案很花哨

Answer 2

在style="display:none;"类

中添加menu

然后使用.hide（）和.show（）方法隐藏并显示菜单。

var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
        $('.menu').show();

    } else {
        $('.menu').hide();
        $('.menu').removeClass('fixed');

    }
});

http://jsfiddle.net/dGVY8/

html脚本如何在滚动时消失并重新出现固定的菜单栏？

2 个答案: