0

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 newbie)

Old question: How to "fixed" menu only when it get to the top?

Let me know if you want to see an example.

Best regards

Carsten

Community
  • 1
  • 1
Carsten
  • 1
  • 3

3 Answers3

2

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: 0px 10%;
    display: block;
}

.menu.floating {
    position: fixed;
    top: 0;
    left: 10%;
    width: 10%;
}
Andrew Dunai
  • 3,061
  • 19
  • 27
1

You don't need JS for this just use:

#idOftheDiv 
{
    position:fixed;
    top:113px;
}

in your CSS.

worldofjr
  • 3,868
  • 8
  • 37
  • 49
S.Pols
  • 3,414
  • 2
  • 21
  • 42
1

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 window
    if($(window).scrollTop()>=113){
        $(element).css('position', 'fixed');
    }
    else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>
Manoj Sharma
  • 596
  • 1
  • 6
  • 23
  • In Magento, where exactly would I put this code? In the template phtml? Why exactly would the code call my menu - if it is only based on one parameter - the 113 px from the top? – Carsten Dec 06 '14 at 14:20