1

I want it something like my Tumblr website TZCraft Tumblr But I can't seem to find the code anywhere so here is my code for my header but no animation when appearing:

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

Here is my code for 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;
}

And here it is my 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>
1
  • jqeury animate() function maybe something interesting
    – This_is_me
    Commented Apr 12, 2013 at 0:53

1 Answer 1

0

One strategy is wrap the whole content with div and provide another UI outside of this div with position fixed. Then use the scroll event to show or hide the menu. This should be more performant than trying to move the menu inside of the body.

I just wrote up an example here.

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

(for some reason, it's working only within the edit view... I'm not familiar with this tool so I don't know what's wrong... but you will get the idea).

So in your code, inside scroll function add hiding and showing logic based on the result of $(window).scrollTop().

Below is the javascript code in my example.

$("#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();
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.