CODEWITHSUNDEEP
jqueryfunctionsyntaxreturnscrolltop
BrownBe
BrownBe

Reputation: 987

Get result of a function jquery

I create a function for getting the currrent scrollTop of the window :

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

I would like to get the current result outside my function for use it on others functions of my script, for example :

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

It doesn't work like that. I can't recover my scrollTop value. Idea ?

Upvotes: 0

Views: 96

Answers (4)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: About pos variable define it outside functions cause if you define it in function it will return undefined

2nd: About window scroll event which will update pos .. it will not update pos variable till you run function scroll() then it will updated with new $(window).scrollTop()

3rd: About navOpen() it will not update itself it should update inside another event .. to get the updated pos value

4th: in your code you forgot + sign before pos

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

it should be

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

so your code should be something like this

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

Upvotes: 1

sEver
sEver

Reputation: 2295

If you want to correct the header top attribute upon every scroll, you would do it like this: 

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

In your code the problem is also the fact that in Javascript variables are scoped to functions, so your pos where you assign the scrollTop value is only visible within the scroll-event-handling anonymous function, and not within the scroll() function.

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
}

If you want to both have the easily available global variable and properly working assignment/handling, you could do:

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

And now you have your value available and always up to date in the globalPos variable, plus you have your css corrected every scroll.

Friendly advise: you should throttle scroll handlers, cause scroll event happens waaaay too often and it might take quite a lot of cpu power.

Upvotes: 2

Matt Styles
Matt Styles

Reputation: 2452

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

There is a fair amount awry here. For a start, invoking scroll should throw you an error as pos won't be defined. You might be tempted to stick pos at the top of the scroll function and return it later but it wont work, for many reasons.

Why are you worried about calling scrollTop wherever you need it?

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

I wouldnt recommend wrapping window in $ all the time though.

Upvotes: 0

David Paul
David Paul

Reputation: 102

You need to declare your variable outside your function.

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

That is how you pass the value.

Upvotes: 1

Related Questions