jmv jmv - 5 months ago 23
CSS Question

fixed menu on a certain part of the page

how can i make a menu position to the top of my page while scrolling. well i can do that on my header. but not on a certain part of the page .let's say my other menu is position on a 980px height of the page . if i try to use position:fixed it will just hide the menu. even if i use z-index. here's the visual:

| HEADER MENU <--- Fixed menu - stays at top even when scrolling.
| HERE |
| |
| OTHER MENU | <---- This must stay on the top when i hit this menu
| | and stay while scrolling
| |
| |
| |
| |

Answer Source

Here is a codepen with an example of position: sticky and a basic jquery example. Remember there are some support issues but you're mostly okay at this point. But it is something to look into if you decide to use sticky. (remove comment syntax to show one option or the other)

#otherMenu {
  position: sticky;
  top: 50px;

Adds 50 to account for the height of the header:

var menu_position = $("#otherMenu").offset().top; 

$(window).on('scroll', function() {
    if (($(document).scrollTop() + 50) >= menu_position){
$("#otherMenu").css({"position":"fixed", "top":"50px"});
    } else {   $("#otherMenu").css({"position":"static", "top":"auto"});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download