Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS, fixed header in jquery horizontal align
    primarykey
    data
    text
    <p>I have a problem with jquery, I made a fixed header but, when it scrolls down it's not aligned horizontally. In CSS, i put margin-left:auto;margin-right:auto; and it doing it right, but when i scroll down the header is going to the left side.</p> <p>I don't know if is the problem in jquery or in CSS.</p> <p>Thanks a lot.</p> <p>Here's my jQuery:</p> <pre><code>$(function () { var HeaderTop = $('#header').offset().top; $(window).scroll(function () { if ($(window).scrollTop() &gt; HeaderTop) { $('#header').css({ position: 'fixed', top: '0px', marginLeft: 'auto', marginRight: 'auto' }); } else { $('#header').css({ position: 'relative', top: '0px' }); } }); }); </code></pre> <p>My CSS: </p> <pre><code> html, body { height:100%; } body { margin: 0; padding: 0; } #header { width:900px; height:100px; background-color:#FFF; margin-left:auto; margin-right:auto; border-top:1px; border-top-color:#D2D2D2; border-top-style:solid; border-bottom:1px; border-bottom-color:#D2D2D2; border-bottom-style:solid; } header { background-color:#FFF; width:900px; margin-left:auto; margin-right:auto; text-align:center; } .content { width:900px; margin-left:auto; margin-right:auto; } #header ul { list-style:none; } #header ul li { display:inline; padding:10px; } </code></pre> <p>My HTML:</p> <pre><code> &lt;header&gt; &lt;img src="darkness.png" height="100" /&gt; &lt;/header&gt; &lt;div id="header"&gt; &lt;ul&gt; &lt;li&gt;Home&lt;/li&gt;&lt;li&gt;About&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;/div&gt; </code></pre> <p><strong>jsFiddle Demo:</strong> <a href="http://jsfiddle.net/24ba7" rel="nofollow">http://jsfiddle.net/24ba7</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload