1

Cant figure out what I'm doing wrong here.

Im using jquery to update a variable on screen resize. The purpose of the variable is to fix an overshoot on a scrollTop function when the CSS hits the media query 768px.

Here is the code I have for the resize function:

$(window).resize(function(){
  if (window.matchMedia('(max-width: 768px)').matches) {
    var scrollovershoot = 40;console.log(scrollovershoot);
  } else {
   var scrollovershoot = 0;console.log(scrollovershoot);
  }
});

Now the function above works exactly as it should in the sense that it logs the correct scrollovershoot variable when the screen size hits 768 or below ie a value of 40. The variable doesn't seem to update in my other scrollTop function though (it doesn't update the scrollTop offset). Here is the code for the scrolling function:

$(".fixed-navigation-follow li a, .see-next a, .more-info-cta, .flipper-container a, #main-atf-cta").click(function (){
    var scrollmeto = $(this).attr("href");
 $('html, body').animate({
       scrollTop: $(scrollmeto).offset().top - scrollovershoot
 }, 1000);
    return false;
});

When I resize the screen I get the automatic console logging from my first function displaying the correct value however when I stop resizing and just type console.log(scrollovershoot); in the console I get the scrollovershoot is not defined message. Why is this?

Improve this question
0

1 Answer 1

Reset to default
3

scrollovershoot needs to be a global variable. You are defining it at function level.

Remove the keyword var when you are changing it to prevent it to be defined at your function scope, and define it above your snippet to make it global.

Or to be safer, you can make it global by assigning it to window which is a global object.

window.scrollovershoot = 0;
$(window).resize(function(){
    if (window.matchMedia('(max-width: 768px)').matches) {
      window.scrollovershoot = 40;console.log(window.scrollovershoot);
    } else {
      window.scrollovershoot = 0;console.log(window.scrollovershoot);
    }
});

And in your jQuery:

$(".fixed-navigation-follow li a, .see-next a, .more-info-cta, .flipper-container a, #main-atf-cta").click(function (){
    var scrollmeto = $(this).attr("href");
 $('html, body').animate({
       scrollTop: $(scrollmeto).offset().top - window.scrollovershoot
 }, 1000);
    return false;
});

When you are using var, you are defining a variable at your function's scope. Defining it before your function, makes it global which could be accessed by other functions.

// In the browser, `window` is a global object referring to the browser object module.
// More info: http://www.w3schools.com/js/js_window.asp.

var myGlobalVar;
function f() {
    myGlobalVar = 'something';
    window.myVar = 'something else';
    var myLocalVar = 'some other things';
}
function g() {
    console.log(myGlobalVar); // this works
    console.log(window.myVar); // this also works
    console.log(myLocalVar); // this does NOT work
}

f();
g();
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I tested your fix in the console and it still seems to overshoot
@DannyDyer Can you please create a fiddle or plunker? Maybe the snippet above still is in a function. In that case instead of scrollovershoot, try window.scrollovershoot. Let me know if this solve you issue so I update the answer.
But it actually works without declaring the variable outside of the function
@DannyDyer In your actual project, use window.scrollovershoot everywhere instead of scrollovershoot and see if it makes any difference. No need to define it.
do you mean only this line: " scrollTop: $(scrollmeto).offset().top - window.scrollovershoot" or everywhere it scrollovershoot appear?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.