Question

我正在尝试使用jQuery为粘性侧边栏创建一个小代码片段。出于某种原因，.scroll()内的函数只运行一次，而不是在每个滚动事件中运行。我能做错什么？

var sticky = $('#sticky');
var staticSticky = $(sticky).offset().top;

$(window).scroll(moveEl(sticky, staticSticky));

function moveEl(element, staticElToTop){
    if( $(window).scrollTop() >= staticElToTop ){
        $(element).css('top', $(window).scrollTop() + 'px');
    }
}

请参阅此处了解整个尝试：http://codepen.io/ExcellentSP/pen/GqZwVG

上面的代码功能不全。在我继续之前，我只是想让滚动事件正常工作。

Answer 1

您需要将moveEl方法的内容包装到函数中（要返回$(window).scroll()），如下所示：

var sticky = $('#sticky');
var staticSticky = $(sticky).offset().top;

$(window).scroll(moveEl(sticky, staticSticky));

function moveEl(element, staticElToTop) {
  return function() {
    if( $(window).scrollTop() >= staticElToTop ){
        $(element).css('top', $(window).scrollTop() + 'px');
    }
  }
}

<强>说明：关键区别在于您调用函数并默认返回undefined，因此它等于$(window).scroll(undefined)。既然你实际上已经打过它，你就会发现它只被触发了一次，这是显而易见的。

只要您在moveEl方法中返回一个函数，.scroll()就会获得一个处理程序，因此它变为$(window).scroll(handler)。所以它现在可以按预期工作。

Answer 2

在执行$（window）.scroll（moveEl（sticky，staticSticky））;时，要求javascript执行该函数。你没有通过它的参考。

protected 

# Called before resource.save
def build_resource(hash=nil)
  super(hash)
  resource.tag_list = params[:tags]
end

.scroll（）只运行一次

2 个答案: