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是undefined。现在，您正在offset1事件中初始化.load，但是您将其设置为$holder，并且在文档准备好之前初始化$holder1，因此它变为{{ 1}}。

只需添加 document.ready 功能即可大大减少您的代码。您也不必执行此操作undefinded，因为这是自动的。：

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);
    }
  });
  
});

错误：无法读取未定义的属性“top”

1 个答案: