Keep Menu On Top When "fixed" In Css
which is positioned 113px from the top, to be on top when users are scrolling the page. I know there is a similar question, but I am not sure where to put the js code. (Yes I am a
Solution 1:
Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/
I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.
You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:
.menu {
width: 100%;
margin: 0px10%;
display: block;
}
.menu.floating {
position: fixed;
top: 0;
left: 10%;
width: 10%;
}
Solution 2:
Well, you can put you code in page head like:-
<html><head><script>
$(document).ready({
$(window).on('scroll', function(){
// instead of 113 use the scrollTop when the element touches the top of the windowif($(window).scrollTop()>=113){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>
Solution 3:
You don't need JS for this just use:
#idOftheDiv
{
position:fixed;
top:113px;
}
in your CSS.
Post a Comment for "Keep Menu On Top When "fixed" In Css"