Javascript 当滚动导致页面下方的内容在滚动过程中跳转时，固定在页面顶部的菜单栏

我试图让一个子菜单保持在页面的顶部，当它在滚动过程中达到顶部时进行滚动。以下是我到目前为止的情况：

$(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>

编辑

好的，现在我理解了这个问题，我做了这个演示

其功能实际上是：

$(window).scroll(function () {
  var $menu = $('#location_menu'),
      $conten = $('#content'),
      scrollpos = $(window).scrollTop();
  if (scrollpos >= 175) {
      $menu.css( {
        "top" : "0",
        "position": "fixed",
      });
      $conten.css('top','375px' );
  } else {
      $menu.css( {
        "position": "relative",
        "top" : "175px",
      });
      $conten.css('top','175px');
  }
});

此处的

175

等于从顶部开始的初始距离，

375

是距离与菜单的

高度之间的相加

$(window).scroll(function () {
  var $menu = $('#location_menu'),
      $conten = $('#content'),
      scrollpos = $(window).scrollTop();
  if (scrollpos >= 175) {
      $menu.css( {
        "top" : "0",
        "position": "fixed",
      });
      $conten.css('top','375px' );
  } else {
      $menu.css( {
        "position": "relative",
        "top" : "175px",
      });
      $conten.css('top','175px');
  }
});