Hi everybody, i have a little problem that i can't solve.
I have a menu fixed by css/java which start scroll only when the scrollbar is at the same level. It's working but i don't know why when the menu starts scrolling, it jumps 3 lines on the bottom. The code look like this :
CSS
Code
#example { height: 50px; background-color: rgba(255,255,255,0.9); width: 950px; }
#example.floatable { position: fixed; top: 0; }
HTML
Code
<ul>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul>
<div id="example">Fixed menu</div>
<ul>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul>
JAVA
Code
var positionElementInPage = $('#example').offset().top;
$(window).scroll(
function() {
if ($(window).scrollTop() >= positionElementInPage) {
$('#example').addClass("floatable");
} else {
$('#example').removeClass("floatable");
}
}
);
If someone have an idea.