Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I agree with Adam, this is definitely a rendering bug. If you animate the menu using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate%28%29" rel="nofollow"><code>translate()</code> transform-function</a> instead, it does not happen.</p> <p>There are other bonuses to using this method as well: <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" rel="nofollow">http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/</a></p> <p>jQuery core does not allow you to animate using <code>translate()</code> out of the box, but there is a plugin that enables this at <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">http://ricostacruz.com/jquery.transit/</a> , or you can opt for using <code>.css()</code> and let <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="nofollow">css transitions</a> do the heavy lifting.</p> <hr> <p>Here is an <strong>example using the plugin</strong>:</p> <pre class="lang-js prettyprint-override"><code>var menu = $("#menu"); $(window).scroll(function(){ var newTop = $(window).scrollTop(); menu.stop().transit({ y: newTop +'px' }, 500); }); </code></pre> <p>Plugin demo at <a href="http://jsfiddle.net/Hb3jS/5/" rel="nofollow">http://jsfiddle.net/Hb3jS/5/</a></p> <hr> <p>Here is an example using <strong>CSS transitions</strong>:</p> <h3>js</h3> <pre class="lang-js prettyprint-override"><code>var menu = $("#menu"); $(window).scroll(function(){ var newTop = $(window).scrollTop(); menu.css({ transform: 'translateY(' + newTop +'px)' }); }); </code></pre> <h3>css</h3> <pre class="lang-css prettyprint-override"><code>#menu { transition: all .5s; } </code></pre> <p>CSS demo at <a href="http://jsfiddle.net/Hb3jS/6/" rel="nofollow">http://jsfiddle.net/Hb3jS/6/</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.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      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