如何在向下滚动时隐藏标题，像向上菜单一样向上滚动显示

I am new at javascript css and html. My head realy blow up while trying to do what I need. I found this code to inspire me but I could not make it to be suitable for my requirement. I created this jsfiddle. What I realy need something like linkedin menu but my my main header menu div is not fixed. I want if user scroll down my red menu stick to top and if scroll up it hides and if user reach top of scroll my red menu stick bottom of main (blue) menu. Can you guys tell me how I can manage to do that.

我是javascript css和html的新手。在尝试做我需要的时候,我的脑袋真的很爽。我发现这段代码可以激励我,但我不能让它适合我的要求。我创造了这个jsfiddle。我真的需要像菜单这样的东西,但我的主标题菜单div是不固定的。我想如果用户向下滚动我的红色菜单粘到顶部,如果向上滚动它隐藏,如果用户到达滚动顶部我的红色菜单粘在主(蓝色)菜单的底部。你们能告诉我如何才能做到这一点。

my html code is

我的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>

MY css code

我的css代码

    body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}

    #lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}
    .mainMenu{height:40px;background-color: #5C9DD7; color:white;width:100%;}
    img{float:left; margin:0 10px 10px 0;}

    .yapiskan{
      background-color:#e74c3c; 
      color:white; 
      font-size:24px; 
      padding:5px; 
      text-align:center;  
      width:100%; 
      transition: top .5s;
    }

2 个解决方案

#1

Here your example modified JSFIDDLE

这里你的例子修改了JSFIDDLE

Add to you JS with at least jquery 1.11^:

添加到JS至少jquery 1.11 ^:

    //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 to your CSS:

添加到您的CSS:

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

#2

Just to point you to the right direction..

只是为了指出正确的方向..

$(window).on('scroll' function() {}) will run function on window scroll

$(window).on('scroll'function(){})将在窗口滚动上运行函数

el.offset().top will get the el's position within the page

el.offset()。top将获得el在页面中的位置

$(window).scrollTop() will get the current scroll position

$(window).scrollTop()将获取当前滚动位置

now all you have to do is run if(el.offset().top ==== $(window).scrolltop()) to do what you want

现在你所要做的就是运行if(el.offset()。top ==== $(window).scrolltop())来做你想做的事情

#1