0

我正在尝试在 wordpress 中使用以下示例 - 我需要一个包含广告的 div 以开始，例如，在页面下方 300 像素，然后向上滚动页面直到它到达顶部，然后如果用户继续滚动则停留在那里向下。该示例应说明这一点：

http://jsfiddle.net/jPxEY/

在这里，它在一个应该可以工作的 html 文件中，一切似乎都在那里，但它不起作用：http ://www.altesc.net/exmp.html

事实上，如果您在“类似问题”框中查看并向下滚动，这正是我所追求的。

我很确定我已经正确地完成了所有操作，但是 javascript 似乎不起作用。如果我从 jquery 复制所有内容并将其直接添加到标题中，而不是在单独的 js 文件中，它可以工作，只有当我像这样调用 jquery 时：

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript">

它无法启动。

关于什么是错的任何想法？

添加了我的标题以提供帮助：

<script type='text/javascript' src='http://www.altesc.net/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

<script type="text/javascript">
//<![CDATA[
$(window).load(function(){

$(document).scroll(function() {

var useFixedSidebar = $(document).scrollTop() > 330;
$('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);

});

});//]]> 
</script>
4

4 回答 4

1

删除这个：$(window).load(function(){

于 2012-12-29T04:21:43.183 回答
1

正如我在问题下的评论中所说，您的 jQuery 包含文件在最底部有一个对 的调用jQuery.noConflict();，它释放了$对jQuery().

因此，解决此问题的最直接方法是：

jQuery(window).load(function(){
    jQuery(document).scroll(function() {
        var useFixedSidebar = jQuery(document).scrollTop() > 330;
        jQuery('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

现在你的代码可以工作了。这是可在我的计算机上运行的文件的 Pastebin（请注意，如果您的屏幕非常大，则不应将浏览器保持最大化）：

http://pastebin.com/GCvaCF7c

不过，有些人真的很喜欢$速记，所以你经常看到这个：

//                   >>> The $ below <<<
jQuery(window).load(function($){
    $(document).scroll(function() {
        var useFixedSidebar = $(document).scrollTop() > 330;
        $('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

jQuery 允许您在范围内使用它。现在，只需习惯于jQUery()在全球范围内的任何时间使用。

于 2012-12-29T04:21:50.023 回答
0

这里有几个问题：

  • 首先，使用 jQuery 的本地副本。

    尽管在线副本会一直保持不变，但最好您拥有自己的副本。换个角度想一想：如果 jQuery 网站宕机了怎么办？你正在“窃取”的脚本也会失败，并使依赖于被窃取的 jQuery 的脚本失败。

  • 首先加载库

    脚本是按顺序加载和解析的，一个接一个（除非使用了一些异步的东西，比如属性或依赖加载器）defer。async如果您的代码段依赖于 jQuery 并且在 jQuery之前加载，那么它将失败。首先加载库脚本，然后是依赖它的脚本。

    快速了解我的意思：

    <script src="jQuery.js"></script>
<script src="yourScriptThatDependsOnJQuery.js"></script>
<script>
    //scripts that depend on jQuery
</script>
于 2012-12-29T03:41:58.530 回答
0

您可以尝试做一些事情来使其正常工作。

  1. 确保您的脚本被拉入页面，一种检查方法是使用 Chrome 调试器中的“源”选项卡并在 html 头部分中搜索其他文件

  2. 确保在包含 jQuery 之后包含了依赖脚本，因为它肯定依赖于它。

  3. 检查是否正确包含 jQuery，并且只包含一次。

  4. 注意 jQuery 冲突。还有一些其他库覆盖了 $，因此您的代码无法正常工作，因为 $ 不再是 jQuery 的别名。您可以使用它jQuery.noConflict()来避免与页面上使用相同变量 $ 的其他库发生冲突。

于 2012-12-29T03:53:28.393 回答