外部 jQuery 滚动不工作

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().top（因为它会随着位置的变化而动态变化），然后检查 window.

到达的位置

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

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

此外，最好的做法是通过脚本更改 class，通过 CSS:

定义 class 样式

$(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 滚动不工作

external jQuery scroll not working

javascript

jquery

scroll

scrolltop