Question

我正在尝试在屏幕到达页面顶部时创建一个粘性顶部导航栏。基本上，当它到达页面顶部时，位置从相对位置变为固定位置。

当我在HTML代码的主体内部包含jScript时，我的代码可以正常工作。我是新手使用jQuery，所以如果你们可以帮助我。

这是我的HTML：

<html>
<head>
    <title></title>
    <link href="main-style.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="sticky_nav.js"></script>
</head>
<body>
        <header class="banner">
            <div class="logo"></div>
            <div class ="contact-info">
                <div class="fb"></div>
            </div>
        </header>
        <nav class="top-nav" id="top-nav">
        </nav>
        <div class="main">
        </div>
</body>
</html>

这是我的css：

body {
    padding-top: 450px;
    background-image: url(background.jpg);
}

.banner {
    left: 50%;
    margin: 0 0 0 -25%;
    position: fixed;
    top: 0px;
    height: 475px;
    width: 950px;
    z-index: -10;
    background-image: url(img4.jpg);
}

.top-nav {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: #F0742F;
    width: 950px;
    height: 70px;
    z-index: 20;
    margin-bottom: -60px;
    box-shadow: 0 5px 3px rgba(0,0,0,.4);
    text-align: center;
    padding-top: 20px;
    border-radius: 10px;
}

.top-nav a {
    font: 25px bold;
    text-decoration: none;
    color: #FFF;
    padding-left: 20px;
}

.top-nav-scrolled {
    position: fixed;
    width: 100%;
    top: 0;
    left: 50%;
    margin: 0 0 0 -25%;
}

这是我的js：

var tn = $(".top-nav");
var tns = $(".top-nav-scrolled");
var hdr = $('header').height();

$(document).ready(function(){
    $(window).scroll(function() {
    if( $(this).scrollTop() > (hdr - 20) ) {
            if( $(this).scrollTop() > (hdr - 20) ) {
        tn.add(tns);
    } 
    else {
        tn.remove(tns);
    })
});

当我在内部放置js代码时，它在脚本标记之间起作用。所以我不确定我做错了什么。

Answer 1

$(this).scrollTop() > (hdr - 20)

看起来很奇怪。

我相信你需要缓存导航栏的offset（）。顶部（因为它会随着位置的变化而动态变化），然后检查窗口是否达到了它。

var tn = $(".top-nav");
var tns = $(".top-nav-scrolled");
var hdr = $('header').height();
var offset = tn.offset().top;

$(document).ready(function(){
    $(window).scroll(function() {
        if( $(this).scrollTop() > offset) {
            tn.css("position", "fixed");
            tn.css("top", "0");
            tn.css("left", "50%");
            tn.css("margin","0 0 0 -25%");
        }
        else {
            tn.css("position", "relative");
            tn.removeAttr("left");
            tn.removeAttr("top");
            tn.removeAttr("margin");
        }
    })
});

就像那样。

此外，您可以将普通对象传递给css（）方法，如下所示：

tn.css({
    "position": "fixed",
    "top": "0"
});

等等。

Answer 2

由于您在文档sticky_nav.js中调用了head，因此尚未存在非元素元素。因此，错误在tn，tns和hdr声明中：它们应该位于dom-ready函数内。

此外，最好的实践将通过脚本更改类，通过CSS定义类样式：

$(document).on('ready', function(){
    var tn = $(".top-nav");
    var hdr = $('header').height();
    $(window).on('scroll', function() {
        tn.toggleClass('top-nav-scrolled', $(this).scrollTop() > (hdr - 20))
    });
});

外部jQuery滚动无法正常工作

2 个答案: