Javascript html脚本如何在滚动时消失并重新显示固定菜单栏？_Javascript_Jquery_Html_Css

Javascript html脚本如何在滚动时消失并重新显示固定菜单栏？

javascript jquery html css

Javascript html脚本如何在滚动时消失并重新显示固定菜单栏？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想做一个类似的菜单栏但是逻辑的东西有点难在菜单中添加style=“display:none；”“ 然后用.hide（）和.show（）方法隐藏并显示菜单您可能也想。就我个人而言，我觉得这个jQuery解决方案相当花哨到底什么不起作用，你觉得什么“逻辑东西”很难？JSFIDLE正在按照我的预期工作。我想在你像www.billykick.com一样向上滚动时禁用菜单，向下滚动时禁用apear，但是idk如何在jquery中执行条件：（谢谢，但是还有更多你知道如何实现淡入淡出动画效果吗？只需将

我想做一个类似的菜单栏

但是逻辑的东西有点难在

菜单中添加style=“display:none；”“

然后用.hide（）和.show（）方法隐藏并显示菜单
您可能也想。就我个人而言，我觉得这个jQuery解决方案相当花哨到底什么不起作用，你觉得什么“逻辑东西”很难？JSFIDLE正在按照我的预期工作。我想在你像www.billykick.com一样向上滚动时禁用菜单，向下滚动时禁用apear，但是idk如何在jquery中执行条件：（谢谢，但是还有更多你知道如何实现淡入淡出动画效果吗？只需将.show（）替换为.fadeIn（）如果要指定持续时间，请使用.fadeIn（200）.200是毫秒。请使用fadeOut（）而不是.hide（）yay
<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>

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

    }
});