如何隐藏标题向下滚动，显示向上滚动像linkedin菜单 [英] How to hide header on scroll down, show on scroll up like linkedin menu

问题描述

我是新的javascript css和html。我的头实在炸了，而我想做我需要的。我发现此代码可以激励我，但我无法使其适合我的要求。我创建了此jsfiddle 。我真的需要一些像linkedin菜单，但我的主标题菜单div不是固定的。我想如果用户向下滚动我的红色菜单棒到顶部，如果向上滚动它隐藏，如果用户到达顶部滚动我的红色菜单棒的底部（蓝色）菜单。

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.

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

    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;
    }

推荐答案

href =https://jsfiddle.net/h64s4vy2/4/ =nofollow> JSFIDDLE

Here your example modified JSFIDDLE

添加到JS至少有jquery 1.11 ^：

Add to you JS with at least 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');
    });

添加到您的CSS：

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

这篇关于如何隐藏标题向下滚动，显示向上滚动像linkedin菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！