Question

我创建了一个函数来获取窗口的currrent 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-event-handling匿名函数中可见，而不是在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
}

如果您想拥有易于使用的全局变量并正确地进行分配/处理，您可以这样做：

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

1st：关于pos变量在函数外定义它会导致如果在函数中定义它将返回undefined

第二：关于窗口滚动事件将更新pos ..它将不会更新pos变量，直到您运行函数scroll（）然后它将更新为新的$（窗口）.scrollTop（）

第3名：关于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

Answer 4

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

这里有很多错误。首先，调用scroll会导致错误，因为pos无法定义。您可能会想要将pos粘贴在滚动函数的顶部并稍后返回，但由于多种原因它无法正常工作。

为什么您担心在任何需要的地方拨打scrollTop？

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

我建议不要一直包装window。

获取函数jquery

4 个答案: