jmv jmv - 1 month ago 9
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.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
| CONTENT BEGINS |
| HERE |
| |
| OTHER MENU | <---- This must stay on the top when i hit this menu
| | and stay while scrolling
| |
| |
| |
| |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+

SLL SLL
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. https://codepen.io/anon/pen/WZGxrm?editors=1111 (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"});
    }
});