1

我想要它类似于我的 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>
4

1 回答 1

0

一种策略是用 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();
  }
});
于 2013-04-12T01:21:26.800 回答