Using jQuery to fix a div, but it resizes when it comes out of flow

Question

I'm having a small problem with a piece of code I'm writing and was hoping someone could point me in the right direction. I have a site in a 3 column display, from left to right I have the nav bar, content, and a sidebar for news updates and such. I'm trying to set the nav bar to stick to the top of the screen when the user scrolls, and this works fine. The problem I'm having is that when the nav element is fixed it comes out of the table and resizes. Here is my code on all three pieces.

HTML:

<table id="content">
 <tr>
  <td id="left">
   <nav>
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
    <a>Link 4</a>
   </td>
   ...
 </table>

CSS:

#left { width: 10% }
#middle { width: 70% }
#right { width: 20% }
#content {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;

.stick {
    position: fixed;
    top: 0;
}

jQuery:

$(document).ready(function() {
    var s = $("nav");
    var pos = s.offset();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

So, everything works as it's designed to, the only problem I'm having is that once the nav element is fixed, because it's out of flow with the table it no longer uses the 10% width property and shrinks down to the width of the links themselves.

Is there anyway to preserve it's dimensions when I apply the .stick class?

The reason I'm using percentages for dimensions is I'm hoping to make the site responsive to tablets that get held either horizontally or vertically, rather than playing guessing games with hard pixel dimensions. Would it be better to just use fixed properties like that, though?

Thank you all in advance for any help you can provide!

Can you please add **fiddle** for that? When i am trying using your code it works fine for me. — Swati, Nov 05 '14 at 05:32

score 0 · Answer 1 · edited Nov 05 '14 at 07:51

0

Make the parent element tr#left positioned relative.

tr#left {
    width: 10%;
    position: relative;
}

Please see the updated fiddle

edited Nov 05 '14 at 07:51

Juan Mellado

14,973
5
47
54

answered Nov 05 '14 at 06:13

Swati

99
4

Using jQuery to fix a div, but it resizes when it comes out of flow

1 Answers1