jquery - ページがスクロールされたときに div 固定メニューを表示する方法

Question

私は2つのコードを持っています:

以下のものは、要素をクリックするとメニューが表示されます

$j(function () {
  $j('#navFirst ul li:nth-child(1)').click(function() {
    $j('#productsSubNav').slideToggle('slow');
  $j('#productsSubNav').css({"visibility": 'visible'});
  return false;
  });
});

ページをスクロールするまで、すべて正常に動作します。ページをスクロールすると、メニュー項目をもう一度クリックすると、div が表示されているように見えますが、ページの上部に表示されます。スクロールしていないときのように、メインメニューの下に表示できないようです。

ページをスクロールしながら書く方法はありますか?

私はこの趣旨で何かをしようとしていました

$j(window).scroll(function () {
var y_scroll_pos = $j(window).scrollTop();//.pageYOffset;
var scroll_pos_test = $j('#topBar').height(); // set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test ) {
  if ($j('.subnav').is(':visible')) {
    $j('.subnav').css({
    "position": 'fixed',
    "top": '20px'
    })
   }
}

動作していないようです。