jquery - 我怎样才能使 Logo 出现在向下滚动时出现的顶部固定菜单栏上，返回顶部时它应该消失？

Question

我正在寻找这样的东西-

techcrunch.com ..但效果不完全一样..

一个标志留在标题的左边..当向下滚动经过它时，第二个标志应该出现在菜单栏的右边，当我们向下滚动时它保持固定在顶部..

这是使用的CSS:

    #element.style {

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

}

和使用的jquery:

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

整个事情似乎有时有效，有时无效。那么需要做哪些更改以及 jquery 中的任何缺陷？

Answer 1

这是您要找的吗？

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

你可以在这里找到教程
http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/

不需要jquery