Question: i'd like to make my code neater and less confusing. here's the code:

```
  // NAV BAR  //
$(window).on("scroll resize", function() {
 if($(window).width() > 980) {
  if($(window).scrollTop() > 20) {
    //add black background
    $(".x-navbar").addClass("active");
    $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
  } 
  else {
    //remove background
    $(".x-navbar").removeClass("active");
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
  }
 }else{
     // if window width < 980
     //remove background
    $(".x-navbar").removeClass("active");
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
 }
 });

```

what it does is simply gets the width of the screen and as soon as the user scrolls down, it restyles the header by giving it a smaller height and a different background using the classes active and small-bar. i got the code here and there so it's kinda messy, isn't there a way to write it in less strings and make it more efficient?

Answer: 
You can do both checks at once, to remove duplicate code:

```
// NAV BAR  //
var $window = $(window);
$window.on("scroll resize", function() {
  var showBG = $window.width() > 980 && $window.scrollTop() > 20;
  if (showBG) {
    //add black background
    $(".x-navbar").addClass("active");
    $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
  }
  else {
    //remove background
    $(".x-navbar").removeClass("active");
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
  }
 });

```
```
var $win = $(window);
var nav = $(".x-navbar");
var navLinks = nav.find(".desktop .x-nav li  a");

$win.on("scroll resize", function() {
   if($win.width() > 980 && $win.scrollTop() > 20) {
     nav.addClass("active")
     navLinks.addClass("small-bar");
   } 
   else if($win.width() <= 980){
     nav.removeClass("active")
     navLinks.removeClass("small-bar");
   }
}

```