Question

I am having trouble regarding the layout of HTML table columns when added with a jQuery. I have two columns in my table, the left one for the menu and the right one is an iframe that changes its contents.

What I want to do is fix the position of the menu column even when vertically scrolling the content column using jQuery. I have successfully done this using this jQuery code,

jQuery(function($) {

    var nav    = $('#main_menu'),
        offset = nav.offset();

    $(window).scroll(function () {
      if($(window).scrollTop() > offset.top - 50) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    });

}); 

however the content column overlaps with the menu column. Thus, the content column goes completely under the menu column. I want the content column to be fixed also beside the menu column but still scrollable.

However, this only happen when the browser screen is smaller than the page. Below is the jsFiddle code. I am viewing this Mozilla Firefox but the page should be also compatible with IE 7 and above.

http://jsfiddle.net/Aym72/7/

Scroll down the Result and then horizontally scroll to the right.
Hope you can help me.

Answer 1

This is very bad design.

[http://jsfiddle.net/SFZwx/][1]

[1]: http://jsfiddle.net/SFZwx/ this works true.

Should be position: absolute; instead of position: fixed;.

And update layer’s left and top attributes for each scrolls.