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, Feb 23 '17 at 18:36
Possible duplicate of [jQuery - Execute scripts based on screen size](http://stackoverflow.com/questions/17237935/jquery-execute-scripts-based-on-screen-size) — Diego Incerti, Feb 23 '17 at 18:51

score 1 · Answer 1 · answered Feb 23 '17 at 19:12

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. — azs06, Feb 23 '17 at 21:03
Is this is the effect you want https://output.jsbin.com/tadeli . here is code for it https://jsbin.com/tadeli/edit?html,css,js,output — azs06, Feb 23 '17 at 21:40

score 0 · Answer 2 · answered Feb 23 '17 at 18:38

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? — Luis Esteban Rovira, Feb 23 '17 at 18:40

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

2 Answers2