.js active only for resolution >767px

Question

I have tricky header and when I scroll down... header-bar, menu and logo are smaller. But I don't want that on the mobile device. How to activate that .js only for resolution >767px?

$(window).scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 350 )
        $(".top-nav li").css("padding", "20px 15px 0px"),
        $(".logo img").css("margin", "7px 0 0 0"),
        $(".logo img").css("height", "50px");
    else
        $(".top-nav li").css("padding", "30px 15px 10px"),
        $(".logo img").css("margin", "13px 0 0 0"),
        $(".logo img").css("height", "57px");
});

Answer 1

What you search for is Responsive Webdesign and should not be implemented all-alone in JS.

Implement it in css instead like this (just for example):

@media(min-device-width: 767px){
  .top-nav li {
    padding: 20px 15px 0px;
  }
}

Regards