how to make a div fixed menu visible when the page is scrolled

Question

I have two pieces of code:

The one below makes my menu appear if I click an element

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

Everything works fine until I scroll the page. When I scroll the page, if I click the menu item again the div seems to appear, but appears at the top of the page. I cannot seem to get it to appear below the main menu like it would when not scrolled.

Is there a way to write while page is scrolled do x?

I was trying to do something to this effect

$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'
    })
   }
}

It does not seem to be working.