让div滚动，直到它到达页面顶部？

我正在尝试在wordpress中使用下面的示例 - 我需要一个包含广告的div，以在页面下方开始，例如300px，然后向上滚动页面直到它到达顶部，然后停留在用户继续向下滚动。本示例应解释：让div滚动，直到它到达页面顶部？

这是一个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>

来源

2012-12-29 Jim

该示例似乎工作正常......究竟是什么问题？ – David

您链接到的文件的最底部是：'jQuery.noConflict（）;'如果您打开Firefox的Firebug JS控制台或Chrome JS控制台，您会看到一个错误，“$'不是函数。为了简化，现在在全局范围内使用'jQuery（）'而不是'$（）'，*尤其*。其他库以同样的方式使用'$'，这就是为什么''jQuery.noConflict（）'存在。例如 –

举个例子，$（window）.load（function（）应该是jQuery（window）.load（function（）？我改变了这个，并没有使它工作。在第一篇文章中的例子，看看他们是否能得到它的工作，然后我可以看看修补程序的代码。 – Jim

正如我在这个问题在我的评论说，你的jQuery包括文件有，在非常非常底，以jQuery.noConflict();通话，释放的$速记功能参考jQuery()。

因此，要解决这个最直接的办法是：

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

现在你的代码工作。下面是我的电脑上工作文件的引擎收录（注意你不应该让你的浏览器最大化，如果你有一个非常大的屏幕）：

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-29 04:21:50

谢谢。我在用于测试的离线版本中出现了轻微的代码错误，只有在您发布此文件时才会注意到它。现在起作用了。再次感谢。 – Jim

我在范围中放置了'$'的另一种方式。 –

我想我有一个最后的抱怨。在向下滚动页面时，如果我点击刷新，那么js不会启动，直到我再次滚动 - 使框跳跃并看起来很尴尬。有没有人知道这个呢？你可以看到我的意思是通过在这个页面上滚动一半，看到添加不对齐：http://www.altesc.net/send-us-a-tip/ – Jim

几个问题：

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

尽管在线副本会一直保持最佳状态，但最好还是拥有自己的副本。以另一种方式思考它：如果jQuery网站崩溃怎么办？您正在“榨取”的脚本也将停止运行，并且使依赖于抽取的jQuery的脚本失败。第一

脚本
负载库被加载和在序列解析，一个在另一个（除非使用像defer或async属性，或一个依赖装载机一些异步的东西）以后。如果你的代码片断依赖于jQuery，并且在之前加载了，那么它会失败。首先加载库脚本，然后加载依赖它的脚本。

快速直观的明白我的意思：

<script src="jQuery.js"></script> <script src="yourScriptThatDependsOnJQuery.js"></script> <script> //scripts that depend on jQuery </script>

来源

2012-12-29 03:41:58 Joseph

这仅仅是一个例子，jquery是在本地服务的标题是按顺序的，也许有一些错误？ '' '<脚本类型= “文本/ JavaScript的”>' // <！[CDATA [ $（窗口）.load（函数（）{ $（文件）.scroll（函数（）{ 变种useFixedSidebar = $（document）.scrollTop（）> 330; $（'。adscrollleft'）。toggleClass（'fixedSidebar'，useFixedSidebar）; }）; }）; //]]> ' – Jim

使用CDN托管包含没有任何问题。如果您对此很痒，请使用加载后备脚本或库，例如Require.js。自己托管它也没什么问题，但是CDN在提供内容方面非常娴熟。 –

有一些事情你可以尝试得到这个工作。

确保您的脚本被拉入的页面，以检查一种方法是通过使用Chrome的调试器的“源”选项卡，并寻找在HTML头中其他文件
在包含jQuery之后，确保你已经包含了依赖脚本，因为它肯定是依赖于它的。
检查jQuery是否包含正确且仅包含一次。
小心jQuery caonflicts。还有一些其他库重写了$，所以你的代码不工作，因为$不再是jQuery的别名。您可以使用jQuery.noConflict()以避免与使用相同变量$的页面上的其他库冲突。

来源

2012-12-29 03:53:28 Techie

事情是，我把jsfiddle上的例子放到一个html文件中，没有额外的脚本，只是一个简单的例子，但它不起作用： – Jim

@Jim - 你必须*显示我们*什么不能实际上工作。它有什么意义说，嘿，看，这是有效的，但解决了其他我不会告诉你的东西。？细节。 –

如果是这样，如果你正确地遵循以上4个步骤，你必须很好去。如果在这里发布任何错误。让我们看看我怎么帮你 – Techie

删除此：$(window).load(function(){

来源

2012-12-29 04:21:43 Chanckjh

让div滚动，直到它到达页面顶部？

回答

相关问题