jquery change script based on viewport size

Question

The below code is designed to add the class .active to my div (#sidebar) when the user is at the top of the page. Also, if further down the page and the div is manually expanded (adding .active), the .active class will remain unless the user moves 100px up or down (.line is used as a marker to measure this).

I'm trying to adjust the below code to retain all of this functionality, but to disable it entirely when on mobile, i.e less than 414px.

Any suggestions?

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){

relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
console.log(relativeY);
    if(relativeY >  100 || relativeY < -100 ) {
        $("#sidebar").removeClass("active");
        $("#sidebarToggle").removeClass("active");
        $(".line").css("top","0")
    }
    else  {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }
});

EDIT

I have tried to implement ($window.width() > 414) below but it doesn't work?

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){

relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
console.log(relativeY);

if ($window.width() > 414) {
  if (relativeY > 100 || relativeY < -100) {
    $("#sidebar").removeClass("active");
    $("#sidebarToggle").removeClass("active");
    $(".line").css("top", "0")
  } else {
    $("#sidebar").addClass("active");
    $("#sidebarToggle").addClass("active");
  }
}
});

Andrue Anderson · Accepted Answer · 2015-12-17 14:59:10Z

2

Check window.innerWidth - Use an if statement to conditionally run the code. If that doesn't work, it's not an issue you've outlined.

It's possible that since $(window).scroll() is an event handler, the context of the function is outside of the variable 'var relativeY' causing unintended behavior.

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){
if(window.innerWidth > 414) {
    relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
    console.log(relativeY);
    if(relativeY >  100 || relativeY < -100 ) {
        $("#sidebar").removeClass("active");
        $("#sidebarToggle").removeClass("active");
        $(".line").css("top","0")
    }
    else  {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }
}
});

edited Dec 17, 2015 at 14:59

answered Dec 17, 2015 at 14:43

Andrue Anderson

6594 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dungey_140 Over a year ago

Brilliant, thank you :) All I had to change in the above code was if(window.innerWidth > 414) { to make that work for my needs. innerWidth seems to be a big factor here, any idea why it is so significant?

Andrue Anderson Over a year ago

I'm glad to have been of help. I couldn't say why, it probably has to do with a lot of different factors. However, a general rule of thumb is 'keep it simple' - .innerWidth is a property built into the browser..$(window).width() is a jQuery function

dungey_140 Over a year ago

Strange bug - This works perfectly on desktop browsers, and on iphone it also has the desired effect. However, when on touch devices like iPad (which are above 414px) the script works in reverse? i.e adds .active when scrolling?

dungey_140 Over a year ago

Any ideas @andrue-anderson?

Andrue Anderson Over a year ago

Maybe you could add a handler on the touch event? Isn't that required for a scroll to happen on the target device?

Kageetai · Accepted Answer · 2015-12-17 14:35:41Z

0

you can just use something like $(window).width() to get the width of the window and run the script accordingly

answered Dec 17, 2015 at 14:35

Kageetai

1,3283 gold badges12 silver badges26 bronze badges

2 Comments

dungey_140 Over a year ago

Hi @Kageetai, I have edited the question above with my attempt at this which I previously tried, but it doesn't work? Can you help me to adjust the snippet?

Kageetai Over a year ago

The correct syntax would be $( window ).width(); And maybe you even want to use the document width to be more precise: $( document ).width();

Collectives™ on Stack Overflow

jquery change script based on viewport size

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related