Question

编辑：我发现了问题：教程使用了插件 - ＆gt;

<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

所以是的，现在它有效^ - ^，感谢你的帮助，但是：）

所以这是一个引用这个问题的问题：Change div css when user scrolls past it, using jQuery

我复制了jsfiddle代码，但它不起作用：（

这是我的页面：

<html>
<head>
<title>Demo</title>
<style type="text/css">
body {
    color:#000;
    text-align:center;
    font:700 60px/1'segoe ui', sans-serif;
}
div {
    width:100%;
}
b {
    opacity:.2;
}
.head {
    height:250px;
    line-height:250px;
    background:#34495e;
}
.menu {
    height:100px;
    line-height:100px;
    background:#1abc9c;
}
.main {
    height:600px;
    line-height:600px;
    background:#ffffff;
}
.foot {
    height:800px;
    line-height:800px;
    background:#34495e;
}
/* account for "Menu" being removed from doc flow... */
 .dock .main, .stop .main {
    padding-top:100px;
}
/* when "Head" is out of view... */
 .dock .menu {
    z-index:40;
    position:fixed;
}
/* when "Main" is out of view... */
 .stop .menu {
    z-index:40;
    position:absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var elWrap = $(".wrap");
var elMenu = $(".menu");
var osMenu = elMenu.offset().top;
var osFoot = $(".foot").offset().top - elMenu.height();

$(window).scroll($.throttle(10, function () {

    elMenu.css("top", 0);
    var edge = $(window).scrollTop();

    if (osMenu <= edge && osFoot > edge) {
        elWrap.addClass("dock").removeClass("stop");
    } else {
        elWrap.removeClass("dock stop");
    }
    if (osFoot <= edge) {
        elMenu.css("top", osFoot);
        elWrap.removeClass("dock").addClass("stop");
    }

}));
</script>
</head>
<body style="margin:0;">
<div class="wrap">
    <div class="head"><b>Head</b>
    </div>
    <div class="menu"><b>Menu</b>
    </div>
    <div class="main"><b>Main</b>
    </div>
    <div class="foot"><b>Foot</b>
    </div>
</div>
</body>
</html>

Answer 1

您需要将代码置于document ready电话中。 jsFiddle为你做到了。或者，您可以将它放在页面的末尾。正如您的示例所示，您正试图在尚不存在的元素上执行代码。

$(document).ready(function () {
    var elWrap = $(".wrap");
    var elMenu = $(".menu");
    var osMenu = elMenu.offset().top;
    var osFoot = $(".foot").offset().top - elMenu.height();
    $(window).scroll($.throttle(10, function () {
        elMenu.css("top", 0);
        var edge = $(window).scrollTop();
        if (osMenu <= edge && osFoot > edge) {
            elWrap.addClass("dock").removeClass("stop");
        } else {
            elWrap.removeClass("dock stop");
        }
        if (osFoot <= edge) {
            elMenu.css("top", osFoot);
            elWrap.removeClass("dock").addClass("stop");
        }
    }));
});

Answer 2

将您的代码包装在DOM中。

$(document).ready(function(){
   // code goes here.
});

或者，使用简短表示法：

$(function(){
   // code goes here
});

问题是你试图在它们存在之前访问这些元素。虽然，jsfiddle会自动为你做这件事。

我的jquery代码出了什么问题？（教程代码不起作用）

2 个答案:

我的jquery代码出了什么问题？ （教程代码不起作用）

2 个答案:

我的jquery代码出了什么问题？（教程代码不起作用）