如何滚动流JQuery用户界面对话框

Question

我一直在尝试使用遵循滚动到与移动用户滚动一起对话框，但没有成功

<script> 
$(function() { 
    $("#dialog:ui-dialog").dialog("destroy"); 
    $("#dialog-report-problem-form").dialog({ 
     autoOpen: true, 
     height: 550, 
     width: 700, 
     modal: true, 
     buttons: { 
      "<?= $this->translate('REPORT_PROBLEM'); ?>": function() { 
       reportProblem(); 
      }, 
      "<?= $this->translate('CANCEL'); ?>": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
     } 
    }); 
    $.scrollFollow("#dialog-report-problem-form",{speed: 10}); 
}); 
</script> 

。

<div id="dialog-report-problem-form" title="<?= $this->translate('REPORT_PROBLEM'); ?>"> 
    <?= $this->form ?> 
</div> 

我已经收到了错误

box.cont.offset() is null 

有谁知道怎么能解决或其他基于jQuery的解决方案来跟踪用户滚动？

Answer 1

插件scrollFollow似乎是相当马车和发展停产（2008年最后一次更新）

• 当你$.scrollFollow()使用它，默认选项没有设置值，所以你得到了很多的错误就像你得到的那个一样。
• 与$(...).scrollFollow使用时，主要选择容器，它并没有真正的工作是不正确获得 ...

这里是一个小脚本，将移动时滚动窗口周围的对话框：

(function(wnd, $) { 

     // query for elements once 
    var $dlg = $("#dialog-report-problem-form").parent(), 
     $wnd = $(wnd), 
     // get the initial position of dialog 
     initialTop = $dlg.offset().top - $wnd.scrollTop(); 

    $wnd.scroll(function() { 
      // when qscrolling, animate the 'top' property 
      $dlg.stop() 
       .animate({ 
        "top": ($wnd.scrollTop() + initialTop) + "px" 
       }, "slow"); 
     }) 
     .resize(function() { 
      // in case of resize, re-set the initial top position of the dialog 
      initialTop = $dlg.offset().top - $wnd.scrollTop(); 
     }); 

    // if you close/open the dialog, it will mess up the 'initialTop' 
    // this will re-set the correct 'initialTop' when the dialog opens again 
    $dlg.bind('dialogcreate dialogopen', function(e) { 
     initialTop = $dlg.offset().top - $wnd.scrollTop(); 
    }); 

})(window, jQuery); 

工作示例jsfiddle。