获取函数的结果 jquery

Question

我创建了一个函数来获取 window 的当前 scrollTop :

function scroll(){
    $(window).on('scroll', function(){
        var pos = $(window).scrollTop();
    });
    return pos;
}

我想在我的函数之外获取当前结果，以便在我的脚本的其他函数中使用它，例如：

function navOpen() {
    $('header').css('top','-' pos);
}

不是这样的。我无法恢复我的 scrollTop 值。想法？

Answer 1

如果您想在每次滚动时更正页眉顶部属性，您可以这样做：

$(window).on('scroll', function (){
  $('header').css('top','-' + $(window).scrollTop());
}

在您的代码中，问题还在于 Javascript 变量的作用域是函数，因此您分配 scrollTop 值的 pos 仅在滚动事件处理中可见匿名函数，不在 scroll() 函数内。

function scroll(){
  $(window).on('scroll', function(){
    var pos = $(window).scrollTop(); 
    //The above variable is only visible within the function it was declared in
  });
  return pos; //this is an undeclared variable, trying to return it will throw an error
}

如果您既想拥有易于使用的全局变量又想正常工作 assignment/handling，您可以这样做：

var globalPos = 0; //declaring the global var

function updateGlobalPos(){ 
    globalPos = $(window).scrollTop(); //assigning the value upon scroll
}

function updateCss(){
    $('header').css('top','-' + globalPos); //correcting the css upon scroll
}

//attaching handlers to scroll event
$(window).on('scroll', updateGlobalPos);     
$(window).on('scroll', updateCss);

现在您在 globalPos 变量中有了可用的值并且始终是最新的，而且您的 css 更正了每个卷轴。

友情建议：您应该限制滚动处理程序，因为滚动事件发生得太频繁了，可能会消耗相当多的 cpu 电量。

Answer 2

您需要在函数外声明变量。

var pos = 0;
function scroll(){
    $(window).on('scroll', function(){
        pos = $(window).scrollTop();
    });
    return pos;
}
function navOpen() {
    $('header').css('top','-' pos);
}

这就是您传递值的方式。

Answer 3

function scroll(){
    $(window).on('scroll', function(){
        var pos = $(window).scrollTop();
    });
    return pos;
}

这里有很多错误。首先，调用 scroll 应该会抛出一个错误，因为 pos 不会被定义。您可能想将 pos 粘贴在滚动函数的顶部，然后 return 粘贴它，但由于多种原因，它不会起作用。

你为什么担心在需要的地方打电话给 scrollTop？

function navOpen() {
    $('header').css('top', -$( window ).scrollTop() );
}

不过我不建议一直用 $ 包装 window。

Answer 4

1st: 关于 pos 变量在函数外定义它，因为如果你在函数中定义它，它将 return undefined

2nd：关于 window 滚动事件，它会更新 pos .. 它不会更新 pos 变量，直到你运行函数 scroll() 然后它会用新的 $(window).scrollTop()

3rd：关于 navOpen() 它不会自行更新它应该在另一个事件中更新..以获得更新的 pos 值

4：在你的代码中你忘记了 + 在 pos 之前签名

$('header').css('top','-' pos);

应该是

$('header').css('top','-'+ pos);

所以你的代码应该是这样的

var pos= 0;
function scroll(){
    $(window).on('scroll', function(){
       pos = $(window).scrollTop();
    });
    return pos;
}
function navOpen() {
    alert(pos);
    //$('header').css('top','-'+pos);
}

scroll(); // run scroll function here to update pos
//navOpen(); // you can run it here but for sure it will return 0;
$('button').on('click',function(){
    navOpen();
});

Demo

获取函数的结果 jquery

Get result of a function jquery

syntax

jquery

return

function

scrolltop