Question

嗨我试图创建一个动态标题/导航栏，例如此处显示的标题栏：http://www.feed-the-beast.com/

我现在有这个：

Jquery的：

$(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

所以你想要一个带滚动锚的粘性meniu？

以下是它的脚本：

$(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"所需的背景颜色。

动态标题栏/导航栏

1 个答案: