jquery - 动态标题栏/导航栏

Question

嘿，我正在尝试创建动态标题/导航栏，例如此处显示的标题栏:http://www.feed-the-beast.com/

我目前有这个去:

J查询:

$(document).ready(function() {
var lock = $('#header').position().top;
$(window).scroll(function() {
    if(lock >= $(window).scrollTop()) {
        if($('#header').hasClass('fixed')) {
            $('#header').removeClass('fixed');
        }
    } else { 
        if(!$('#header').hasClass('fixed')) {
            $('#header').addClass('fixed');
        }
    }
}); 
});

HTML:

<div id="header" class=""></div>

CSS:

#header {
width: 100%;
height: 80px;
background-color: #000;
left:0;
right: 0;
margin-top: 340px;
position: absolute;}

body {
height: 7000px;
width: 100%;
float: right;}
.fixed {
position: fixed;}

我们将不胜感激。

Answer 1

所以你想要一个带有滚动 anchor 的粘性菜单？

这是它的脚本:

$(function() {
    var move = function() {
       var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
       if(st > ot) {
            s.css({
                position: "fixed",

            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",

                });
            }
        }
    };
    $(window).scroll(move);
    move();
});

并且您需要将其添加到您的 HTML 中:

<div id="scroller-anchor></div>
   <div id="scroller">
     YOUR MENU HTML HERE
   </div>

更新

工作jsFiddle这里 :D

PS:此外，如果您不希望背景颜色在粘在顶部时发生变化，您只需将 "background-color": "red" 更改为您想要的背景颜色即可。