Scroll function make left contraction

Question

I'm using following script for Fixed my menu when Scroll the page.

var num = 5;
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.scroll').css({'position':'fixed', 'top':'0px'});
    } else {
        $('.scroll').css({'position':'', 'top':''});
    }
});

I'm using this script for table. See Jsfiddle. When Scroll Down, that title is going contraction to left left side.

Why It's happening and How I can fix? It should support major browsers(not IE).

Answer 1

When you set position: fixed the left prop seems to be set to 0. Hence, the headers were moving to the left corner. You may have to play with display and width props to do what you're after. Also note that adding/removing a class is better than setting inline styles via .css(). Look at the following demo and adapt the code accordingly to suit your needs.

var num = 5;
$(document).bind('scroll', function () {
    if ($(document).scrollTop() > num) {
		$('.scroll').addClass("scrolled");
    } else {
        $('.scroll').removeClass("scrolled");
    }
});

.scroll { width: 100%; }
.scroll th { width: 49% }
.scrolled { position: fixed; top: 0; }
.scrolled th { display: inline-block; width: 47.5% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" width="100%">
    <thead>
        <tr class="scroll">
            <th>Id</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        
    </tbody>
</table>

There may be other ways of doing it, but this is what I could quickly think of :)