javascript - 错误: Cannot read property 'top' of undefined

Question

我需要这方面的帮助，因为它已经显示，并且我尝试使用全局变量等，但问题仍然存在。

var $ = jQuery;
var $window    = $(window),
        $moving1   = $(".scroller1"),
        $holder1   = $("#scroller-wrap1"),      
        offset1;

$window.load(function() {       
        offset1     = $holder1.offset();
});

$window.scroll(function() {
    if ($window.scrollTop() > offset1.top) {
        $moving1.addClass('fixed');
    } else {
        $moving1.removeClass('fixed');
    }
    if ($window.scrollTop() > (offset1.top + $holder1.height() - $moving1.height() - 60)) {
        $moving1.removeClass('fixed', 1000);
    }

    //console.log("scroll: " +$window.scrollTop());
});

基本上，我正在检查窗口是否已完全加载，以便我可以毫无错误地进行计算，但我猜这是不正确的。

这是在 WordPress 内部，这就是我需要 jQuery 部分的原因。

Answer 1

好的。错误来自此命令:

if ($window.scrollTop() > offset1.top) {

这意味着 offset1 是未定义。现在，您正在 .load 事件中初始化 offset1，但您将其设置为等于 $holder 和 $holder1 在文档准备好之前就被初始化了，所以它变成了未定义。

只需添加 document.ready 即可大大减少代码量 功能。您也不必执行此 var $ = JQuery 因为这是自动的。:

// Passing a function to JQuery creates a "document.ready()" callback
// function that will automatically be executed when the DOM is built.
$(function(){

  var $window    = $(window);
  var $moving1   = $(".scroller1");
  var $holder1   = $("#scroller-wrap1");
  var offset1 =  $holder1.offset();

  // JQuery recommends the use of the .on() function to bind 
  // event callbacks as opposed to event methods.
  $window.on("scroll", function() {
    if ($window.scrollTop() > offset1.top) {
        $moving1.addClass('fixed');
    } else {
        $moving1.removeClass('fixed');
    }
    
    if ($window.scrollTop() > (offset1.top + $holder1.height() - $moving1.height() - 60)) {
        $moving1.removeClass('fixed', 1000);
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>