Question

我希望它类似于我的Tumblr网站TZCraft Tumblr但我似乎无法在任何地方找到代码，所以这里是我的标题代码，但出现时没有动画：

    if (!!$('.sHeader').offset())
{
    var sHeadTop = $(".header").offset().top + 48;

    $(window).scroll(function()
    {
        var windowTop = $(window).scrollTop();
        var windowW = $(window).width();

        if (sHeadTop < windowTop)
        {
            $(".sHeader").css({position: 'fixed', opacity: 1, width: windowW});
        }
        else
        {
            $(".sHeader").css({position: "fixed", top: -64, opacity: 1, width: windowW});
        }
    });
}

这是我的css代码：

div.sHeader
{
height: 64px;
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(100%, rgba(51,51,51,0)));
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#00333333', GradientType=0 );
width: 100%;
top:-64px;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
opacity:0;
position:fixed;
}

这是我的HTML：

        <div class="sHeader">
        <div class="line">
            &nbsp;
        </div>
        <div class="tabBox" id="logo1">
            <a href="./index.html"><img src="./img/f.png" id="logo" width="60" height="60"/></a>
        </div>
        <div class="line">
            &nbsp;
        </div>
        <div class="tabBox" id="tab1">
            <a href="./index.html">Home</a>
        </div>
        <div class="tabBox" id="tab2">
            <a href="http://www.twitter.com/">Twitter</a>
        </div>
        <div class="tabBox" id="tab3">
            <a href="./tzcraft/info.html">Info</a>
        </div>
        <div class="line">
            &nbsp;
        </div>
    </div>

Answer 1

一个策略是用div包装整个内容，并在此div之外提供另一个UI，其位置是固定的。然后使用滚动事件来显示或隐藏菜单。这比尝试在体内移动菜单更有效。

我刚刚在这里写了一个例子。

http://jsbin.com/uwanuw/5/edit

（出于某种原因，它只在编辑视图中工作......我不熟悉这个工具，所以我不知道什么是错的......但你会得到这个想法。）

因此，在您的代码中，内部滚动函数根据$（window）.scrollTop（）的结果添加隐藏和显示逻辑。

以下是我示例中的javascript代码。

$("#body").bind("scroll", function(e){
  if($(this).scrollTop() > 100 && $("#menu").css("display") == "none")
  {
    $("#menu").slideDown();
  }
  else if($(this).scrollTop() < 100 && $("#menu").css("display") != "none")
  {
    $("#menu").slideUp();
  }
});

如何制作一个向下滚动的菜单，同时向下滑动以显示JQuery

1 个答案: