CODEWITHSUNDEEP
jquerycssmedia-queries
Rob
Rob

Reputation: 1495

applying jquery to single media queries

I'm trying to add different values to the jquery based on below in relation to the media query.

HTML

<div id="content">
</div>

JS

$("html,body").animate({scrollTop: 360}, 1000);

Desired Effect, something along the lines of this

@media handheld, only screen and (max-width: 1024px) {

$("html,body").animate({scrollTop: 660}, 1000);

}

@media handheld, only screen and (max-width: 768px) {

$("html,body").animate({scrollTop: 260}, 1000);

}

What would be the most ideal way of doing this?

Upvotes: 0

Views: 145

Answers (1)

Joe
Joe

Reputation: 15528

As a commenter said, you can't use JS and CSS together like that. You could do this though:

var width = $(window).width(), scroll = 360;

if(width <= 1024){
    scroll = width > 768 ? 660 : 260;
    // if (width > 768) means width must be 769-1024 so scroll = 660.
    // else the width must be 768 or below so scroll = 260 
}

$("html, body").animate({scrollTop: scroll}, 1000);

Upvotes: 1

Related Questions