Строка меню фиксируется в верхней части страницы, когда прокрутка вызывает скачки содержимого во время прокрутки

Я пытаюсь, чтобы подменю оставалось в верхней части страницы, прокручивая его, когда оно достигает вершины во время прокрутки. Вот что я имею до сих пор:

$(window).scroll(function () {    
  if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
  else { 
$('#location_menu').css('position', 'relative').css('z-index','1');
 }});

Проблема, с которой я сталкиваюсь, заключается в том, что прокрутка не является гладкой и как только элемент изменяется с позиции: по отношению к позиции: исправлено содержимое, похоже, прыгает/пропускает около 415 пикселей, что соответствует высоте подменю.

Вот css:

 <div id="location_menu" >submenu content
 </div>

 <div id="content" class="location_detail first">content beneath submenu
 </div>

Я добавил строку для .first чтобы иметь .first верхнюю часть 415px, когда страница прокручивается и достигает в пределах 175px верхней части страницы .css('padding-top','415') это на самом деле не похоже, что-то делают. Нет никаких изменений, поэтому я предполагаю, что я выполнил его неправильно.

Должен ли я использовать другую функцию прокрутки, я перечислил выше?

Вот что я в конечном итоге использовал, чтобы исправить мою проблему, основываясь на коде из @Danko:

$(window).scroll(function () {
  var $conten = $('.first'),
      $menu = $('#location_menu')
      scrollpos = $(window).scrollTop();
  if (scrollpos >= 175) {
      $conten.css('padding-top','365px');
      $menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
  } else {
      $conten.css('padding-top','0');
      $menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
  }
});