CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmenu
jmv
jmv

Reputation: 415

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 | | | | | | | | +¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+

Upvotes: 0

Views: 351

Answers (2)

SLL
SLL

Reputation: 271

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"});
    }
});

Upvotes: 2

rafon
rafon

Reputation: 1542

be sure that there's no overflow:hidden on the header container

Upvotes: 0

Related Questions