如何使徽标出现在顶部固定菜单栏上，该菜单栏向下滚动时显示，回到顶部时该徽标消失？

Question

i am looking for something like this-

techcrunch.com .. but not exactly the same effect..

a logo stays on the left of header..and when scrolled down passing it,a second logo should appear right on the menu bar that remains fixed on top as we scroll down..

this is the css used:

    #element.style {

float: right;
width: 160px;
height: 25px;
margin: 0px;
margin-top: 7px;
padding: 0px;

}

and the jquery used:

// Stick the #nav to the top of the window
        var nav = $('#nav');
        var navHomeY = nav.offset().top;
        var isFixed = false;
        var $w = $(window);
        //console.log(navHomeY);
        //console.log("yada yada yada");
        $w.scroll(function() {
            var scrollTop = $w.scrollTop();
            //console.log(scrollTop);
            //console.log("yada yada yada");
            var shouldBeFixed = scrollTop > navHomeY;
            if (shouldBeFixed && !isFixed) {
            nav.css({
                    position: 'absolute',
                    top: 0,
                    left: nav.offset().left,
                    width: nav.width()
                    });
            isFixed = true;
            $("#lo").show();
            }
            else if (!shouldBeFixed && isFixed)
            {
            nav.css({
                    position: 'static'
                    });
            isFixed = false;
            $("#lo").hide();
            }
            });
});

This whole thing seems to work sometimes and doesnt work sometimes.so what are the changes to be done and any flaws in the jquery?

Answer 1

Is this what you are looking for?

http://jsfiddle.net/cancerian73/RqjXg/

body {
margin: 0;
padding: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 14px 0;
;
}
#container {
background: transparent url('http://www.impressivewebs.com/demo-files/logo-scroll/demologo-wired.jpg') fixed no-repeat 30px 30px;
}
#header {
background: #bbd5fd url(http://www.impressivewebs.com/demo-files/logo-scroll/demologo.jpg) fixed no-repeat 30px 30px;
overflow: hidden;
padding: 30px 0 30px 30px;
height: 138px;
}
p#header-right {
float: left;
font-size: 40px;
text-align: left;
padding: 0 0 0 32px;
padding: 40px 0 0 33px;
width: 960px;
}
a#logo {
display: block;
width: 138px;
height: 138px;
float: left;
}
* html a#logo {
background-position: 0 0;
}
#content {
padding: 20px 50px 0 200px;
clear: left;
}
#homelink {
position: fixed;
top: 30px;
left: 30px;
}
#homelink a {
text-indent: -9999em;
display: block;
width: 138px;
height: 138px;
overflow: hidden;
}
* html #homelink a {
display: none;
}

you can find the tutorials here
http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/

No jquery is needed