jQuery Resizing Issue

jQuery Resizing Issue

I'm using jQuery to make some adjustments to the position of a menu on a site.  I've been at this thing all day when it should be a pretty simple fix.

Originally I had a simple jQuery onScroll() script locking the menu to the top of the browser window when people scrolled past 140px.  It worked great.

Well in attempting to add some functions to it so the design is more responsive has caused a bunch of problems.

I know how to use @media for responsive design but the original jQuery script for scroll overrides any settings I make using @media because it sets the css position element.

So I've since been trying to handle it just via a script.  What I'm getting is either a conflict within the width function calls or now at this point it simply will not set back in place when the browser is expanded back.

I have removed the onScroll part for now until I can get the width part working right.  Here is what I have at this time:

  1. $(window).on('load scroll resize', function() {
  2.     var height = $(window).scrollTop();
  3.     var width = $(window).width();


  6.     if (width > 900) {
  7.         $('#header-nav').css("position","relative").css("top", "-90px").css("right","-380px");
  8.     }
  9.     else if (width <= 900 && width > 610) {
  10.         $('#header-nav').css("position","fixed").css("top", "0").css("right","100px");
  11.     }
  12.     else if (width <= 610 && width > 520) {
  13.         $('#header-nav').css("right","0");
  14.     }
  15.     else if (width <= 520 && width > 380) {
  16.         $('#header-nav').css("font-size","12px");
  17.         $('#header-nav a').css("padding","0 5px").css("border-bottom-right-radius","4px").css("border-bottom-left-radius","4px");
  18.     }
  19.     else if (width <= 380) {
  20.         $('#header-nav').css("font-size","10px");
  21.         $('#header-nav a').css("padding","0 3px");
  22.     }

  24. });

Any help appreciated, I'm still fairly new to scripting with jQuery.