Question

我是javascript css和html的新手。在试图做我需要的时候，我的脑袋真的很爽。我发现this code能激励我，但我不能让它适合我的要求。我创建了this jsfiddle。我真的需要像菜单这样的东西，但我的主标题菜单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>

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

Answer 1

此处您的示例已修改为JSFIDDLE

至少添加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');
    });

添加到您的CSS：

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

Answer 2

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

$(window).on('scroll' function() {})将在窗口滚动

上运行函数

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

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

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

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

2 个答案: