I need to execute jquery code only on certain resolution at window scroll

Question

I've this jquery code. I need to execute only on > 950px resolution. If not I lose the responsive logo. I want to do something similar like the Lenovo homepage navbar.

$(document).ready(function(){ //left side menu functions End //Logo function $(document).scroll(function() { if ($(document).scrollTop() < 25) { $("div.logo").height(200); $('div.logo a').css('background-image', 'url(img/logo-clear.png)'); } else { $("div.logo").height(50); $('div.logo a').css('background-image', 'url(img/logo-sm.png)'); } }); });

You should use CSS classes and media queries instead, and add/remove the class from JS code. — SLaks
– SLaks, Commented Feb 23, 2017 at 18:36
Possible duplicate of jQuery - Execute scripts based on screen size — Diego Incerti
– Diego Incerti, Commented Feb 23, 2017 at 18:51

azs06 · Accepted Answer · 2017-02-23 19:12:42Z

Instead of changing css you can add and remove css, something like this

$(document).ready(function(){ $(document).scroll(function() {	if(window.innerWidth > 950){ if ($(document).scrollTop() < 25) {	$('.logo').addClass('logo-clear'); } else { $('.logo').removeClass('logo-clear'); }	} }); });

body{	height: 150vh; } .logo{	background-color: green;	width: 500px;	height: 500px; } .logo a{	height: 50px; } .logo.logo-clear{	background-color: yellow; } .logo.logo-clear a{	height: 200px; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="logo">	<a href="">hello</a> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </body> </html>

Note, I added some additional css for visualization purpose. You can also check it here https://output.jsbin.com/viqebo

You could create a jsfiddle, or update your answer with css, in my answer you have to update background-color with background-image, then it should work as you intended.
Is this is the effect you want output.jsbin.com/tadeli . here is code for it jsbin.com/tadeli/edit?html,css,js,output

Omprakash Arumugam · Accepted Answer · 2017-02-23 18:38:58Z

Just put your code inside a if condition which checks width of the window (if ($(window).width () > 950))

 $(document).ready(function(){ //left side menu functions End //Logo function $(document).scroll(function() { if ($(window).width () > 950) { if ($(document).scrollTop() < 25) { $("div.logo").height(200); $('div.logo a').css('background-image', 'url(img/logo-clear.png)'); } else { $("div.logo").height(50); $('div.logo a').css('background-image', 'url(img/logo-sm.png)'); } } }); });

yes, i was do it, but I lose the responsive logo... how can I send you an screenshot?

Collectives™ on Stack Overflow

I need to execute jquery code only on certain resolution at window scroll

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related