Question

我已经尝试过互联网上的每一件事我都能找到并且因为我在js中完成了noob并试图学习一些更复杂的css我不知道为什么这个卷轴然后固定代码不起作用，并且不知道如何使其工作。基本上我有一个标题包装，其中包括373px高度的header_pic和高度为50像素的header_nav。我只想滚动到header_nav的顶部，然后将其设置为固定的位置，但我使用的每一个都没有工作由于某种原因我在我的html页面的头部区域包括谷歌的jQuery CDN然后我包括我的外部文件。

这是我在jsfiddle中的网页示例：https://jsfiddle.net/pyr2h0c5/

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
       $('#header_nav').css('position', 'static');
    }
});

感谢您的好评：D

Answer 1

据我所知，您在代码中链接了jQuery，然后包含了您的脚本。您将脚本放在<head>中，这使得在脚本运行时未选择所选元素，因为它们是在脚本之后呈现的（例如#header_nav）。

滚动时可能抛出的错误：

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

<强>解决方案：将jQuery保留在原来的位置，但将您的脚本从<head>中取出，并将其放在结束</body>标记之前。一切都应该是桃子的：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!-- Your HTML -->

<script type="text/javascript">
    var elementPosition = $('#header_nav').offset();

    $(window).scroll(function () {
        if ($(window).scrollTop() > elementPosition.top) {
            $('#header_nav').css('position', 'fixed').css('top', '0');
        } else {
            $('#header_nav').css('position', 'static');
        }
     });
</script>
</body>
</html>

Answer 2

你没有在你的jsfiddle中包含jquery，包括它，并且工作......

jsfiddle

没有代码更改......

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
        $('#header_nav').css('position', 'static');
    }
});

添加类似

的内容

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

在您的真实网页<head>中，或尝试将jQuery下载到本地并将其包含在本地。

滚动然后修复

2 个答案: