Question

首先我没有写这段代码。我在其他人的网站上找到了它，我想通过自己尝试来学习它。但是我不能让它发挥作用。我已经google了代码，以防它是一个免费提供的jQuery插件或任何东西，但我无法在网络上找到它。

我有我的侧边栏（带有ID #sidebar），并且给了它“粘性”类，我在页面顶部包含了jQuery，并且我已将这些代码放在头部：

<!-- Floating sidebar jQuery --> 
        <script type="text/javascript"> 
            var Sticky = function( $obj, opts ){

               $(window).scroll( 
                  function(e){
                     Sticky.onScroll(e, $obj, opts );
                  });

            }
            Sticky.onScroll = function( e, $o, opts ){

               var iScrollTop = $(window).scrollTop();
               var sClass = "sticky";

               //set original data
               if( !$o.data(sClass) ){
                  $o.data(sClass, {css:{position:$o.css('position'),top:$o.css('top')}, offset:$o.offset()} );
               }
               var oOrig = $o.data(sClass);
               var bIsSticky = $o.hasClass(sClass);

               if( iScrollTop > oOrig.offset.top && !bIsSticky ){
                  $o.css({position:'fixed',top:0}).addClass(sClass);
               }else if(iScrollTop < oOrig.offset.top && bIsSticky){
                  $o.css(oOrig.css).removeClass(sClass);
               }   

            }

            Sticky( $('#sidebar') );

        </script>

如您所见，最终的JS行Sticky( $('#sidebar') );在#sidebar元素上触发。但是，当您向下滚动时，此错误将写入Chrome的日志：

未捕获的TypeError：无法读取未定义的属性'offset'

Firebug有点冗长，并说：

oOrig未定义：if( iScrollTop > oOrig.offset.top && !bIsSticky ){

我正在尽力理解这一点，但是有人可以帮我看看它为什么不起作用吗？

谢谢！

杰克

Answer 1

哇，新答案......谢谢felix

将函数调用包装在就绪函数中。

$(function() {
    Sticky($('#sidebar'));
});

当您拨打Sticky($('#sidebar'))时，dom很可能没有准备就绪，所以当.data用于在$o上设置数据时，它实际上什么都不做：

$o.data(sClass, {css:{position:$o.css('position'),top:$o.css('top')}, offset:$o.offset()} );].

所以当它在线获取数据时：

var oOrig = $o.data(sClass);

它无法实际获取数据。

这是因为dom元素尚未准备好被操作，因为dom还没有准备好。

老答案（不对！）

$ .offset是一个函数。

行中的问题：

if( iScrollTop > oOrig.offset.top && !bIsSticky ){

是：oOrig.offset是一个函数，而不是一个变量。所以oOrig.offset.top无效。只需调用该函数，它将返回一个带有top属性的变量：

if( iScrollTop > oOrig.offset().top && !bIsSticky ){

Explination：

oOrig.offset是对函数的引用（jquery中的offset函数）。

您必须调用该函数才能访问.top属性。

Answer 2

您使用的代码似乎过于复杂。我写了一个关于如何实现这个的教程，这个教程应该更容易实现，并且不易出错。

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

jQuery Sticky Sidebar失败了

2 个答案:

老答案（不对！）