Javascript 如何在向下滚动时隐藏标题，在向上滚动时显示标题，如linkedin菜单

我不熟悉javascript css和html。当我想做我需要的事情时，我的头真的爆炸了。我发现它能激励我，但我不能使它适合我的要求。我创造了。我真正需要的是linkedin菜单之类的东西，但我的主标题菜单div没有固定。我想如果用户向下滚动我的红色菜单坚持顶部，如果向上滚动它隐藏，如果用户达到滚动我的红色菜单顶部坚持主（蓝色）菜单底部。你们能告诉我怎么做吗

我的html代码是

    <div class="mainMenu"><h2>Some Menu here</h2></div>
    <div class="yapiskan">STICKY MENU</div>
    <div id="lipsum" >
       <p>Duis vel faucibus purus. Nam interdum erat at bibendum tincidunt. Integer tempor hendrerit purus, sit amet fringilla felis imperdiet tempus. Nullam a sem eget velit mattis</p>
       <img src="http://www.adobewordpress.com/ads/300x250.jpg">
       <p>Morbi varius faucibus nulla ut pharetra. Vestibulum sed sapien turpis. Sed diam felis, ullamcorper vel augue id, porta porta nibh. Mauris interdum elit ac metus fermentum, eu porttitor purus venenatis. In nec metus vitae augue mattis porta in at erat. Sus</p>
    </div>

---

只是为了给你指出正确的方向

$（window）.on（'scroll'函数（）{}）

将在windowscroll上运行函数

el.offset（）.top

将获取

el

在页面中的位置

$（窗口）。scrollTop（）

将获取当前滚动位置

---

现在，您所要做的就是运行

if（el.offset（）.top====$（window.scrolltop（））

来做您想做的事情

至少使用jquery 1.11^向您添加JS：

    //initialize j
    var j = 0;

    // function scroll for viewport
    $(window).on('scroll', function() {
        console.log(j + ' first - variable value j');

        //var top with your menu .yapiskan
        var top = ($('.yapiskan').offset() || { "top": NaN }).top;
        if (isNaN(top)) {
            console.log("something is wrong, no top");  
        } else if (j < top){
            //hide menu
            $('.yapiskan').slideUp();
        } else if (j > top){
            //show menu
            $('.yapiskan').slideDown();
        }
        j = top;
        console.log(j+' last - variable value j');
    });

---

请在你的问题中包含你发现的代码，因为网站会时不时地宕机，或者有时会完全停止存在，最好有相关的代码。你至少应该展示一些你试图实现这一点的代码，一些你做过的研究。有很多网站都在谈论这样的菜单。但在我的问题中，我已经把我从搜索中得到的链接放到了我的项目中，但它并没有成为我想要的。我需要的是linkedin菜单之类的东西。当你打开linkedin时，有两个菜单，一个固定在顶部，另一个就在底部，通过滚动动作显示/隐藏。但我需要的是，这个固定顶部菜单不应该固定，第二个应该可以通过滚动动作导航。顺便说一句，如果你的内容放在

溢出：滚动/auto

区域内，不可能实现此功能。使用CSS

transform:translateY（）

来支持所有滚动和与固定标题的交互。它还可以解决数以十亿计的问题，修复错误和自动滚动输入框焦点。

    //initialize j
    var j = 0;

    // function scroll for viewport
    $(window).on('scroll', function() {
        console.log(j + ' first - variable value j');

        //var top with your menu .yapiskan
        var top = ($('.yapiskan').offset() || { "top": NaN }).top;
        if (isNaN(top)) {
            console.log("something is wrong, no top");  
        } else if (j < top){
            //hide menu
            $('.yapiskan').slideUp();
        } else if (j > top){
            //show menu
            $('.yapiskan').slideDown();
        }
        j = top;
        console.log(j+' last - variable value j');
    });

/*Add position fixed*/
#mainMenu{position:fixed;top:0;}
.yapiskan{position:fixed;top: 40px;}