Javascript 外部jQuery滚动不工作_Javascript_Jquery_Scroll_Scrolltop

Javascript 外部jQuery滚动不工作

javascript jquery scroll

Javascript 外部jQuery滚动不工作,javascript,jquery,scroll,scrolltop,Javascript,Jquery,Scroll,Scrolltop,我试图制作一个粘性顶部导航条，当它到达页面顶部时，它会跟随屏幕。基本上，当它到达页面顶部时，位置从相对更改为固定当我在HTML代码主体内部包含jScript时，我的代码就可以工作了。我不熟悉使用jQuery，所以如果你们能帮我的话这是我的html： <html> <head> <title></title> <link href="main-style.css" rel="stylesheet" type="text/cs

我试图制作一个粘性顶部导航条，当它到达页面顶部时，它会跟随屏幕。基本上，当它到达页面顶部时，位置从相对更改为固定

当我在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>

这是我的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代码放在内部时，在脚本标记之间，它可以工作。所以我不确定我做错了什么

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

看起来很奇怪

我认为您需要缓存导航条的offset.top，因为它会随着位置的变化而动态变化，然后检查窗口是否到达它

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

依此类推。

因为您在文档头中调用了sticky_nav.js，所以还不存在非body元素。因此，错误出现在tn、tns和hdr声明中：它们应该在dom就绪函数中

此外，最好的做法是通过脚本更改类，通过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))
    });
});

根据您的定义，sticky_nav.js必须与html文件位于同一文件夹中，即Check F12->Network，以查看是否加载了脚本。顺便说一下，您不应该通过脚本更改所有样式，只需添加/删除类并在CSS中定义类即可。在您的例子中，您可以使用：tn.toggleClass'fixed_element'，$this.scrollTop>hdr-20；Aff我现在明白了，将您的tn、tns和hdr变量定义放在document 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))
    });
});