Member Avatar for Graycode

Hi,

I have been given the task to revamp/redesign a clients blog. I want to implement a navigation menu like www.mechanicaldummy.com. I like the fact that it sticks to the top of the page. The closest tute I managed to find was this http://www.jtricks.com/javascript/navigation/floating.html

Similar but not the same. I know I would be using CSS but what other language would I be using to create that 'stuck' effect and could anyone give me a knowledgable heads up on how to do this?

Thanks in advance.

Gray

  • 4 Contributors
  • 4 Replies
  • 193 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

Short expert note: the thread already identifies two common approaches—CSS-only pinning and JavaScript helpers. As suggested, prefer a CSS-first solution where possible; ’s fixed-header approach will indeed pin the bar but can introduce layout jumps or overlap; ’s mention of anchoring to right/bottom is valid when a non-top edge is desired.

A modern, robust pattern is to prefer position: sticky for a nav that should remain in the document flow until it reaches the viewport edge, and use position: fixed only as a fallback when full pinning is required. Sticky avoids the content-jump that fixed headers cause, is simpler than JS, and behaves better during touch panning. Important caveats: position: sticky requires a defined offset (for example top: 0), it will not work if an ancestor has overflow set to something other than visible, and CSS transforms or filters on ancestors can create a new containing block that breaks sticky behavior. Stacking contexts and z-index still matter for visual layering.

Example (modern, CSS-first):

/* header stays in flow until it reaches the viewport top */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* small triangle indicator on the active nav item */
.site-nav li { position: relative; }
.site-nav li.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
}

Troubleshooting and accessibility notes: if the stickiness fails, inspect ancestor elements for overflow, transform, or unexpected stacking contexts. For older-browser fallback, use a fixed header plus a same-height placeholder or add top padding to the document to avoid content jumps. Use scroll-margin-top (or scroll-padding-top) on target sections so in-page anchors and keyboard focus aren’t hidden behind the bar. For hide-on-scroll or animated show/hide, combine IntersectionObserver (or a small throttled scroll handler) with CSS transitions rather than forcing layout on every frame.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

just css
absolute positioning of the div that contains the menu, and >0 z-index to allow other content to slide under
a background set with the little triangle for the active choice
all in css

its a pisspoor implentation using javascript addons that are not neccessary, parts of the menu slide offscreen when the page pans

the google search should be css menu

Edited by almostbob because: n/a
Member Avatar for Louilly

I agree it's not the best solution but if that's the way you want to go you would need to give the surrounding div (in their case #header) a position of fixed and as the above post states a higher z-index. I believe the following css is what creates the sticking effect:

#header {
position: fixed;
z-index: 200;
}

Member Avatar for Louilly

Also, have a look at the footer navigation on this page, it does the same thing but with no loss of the menu (or sliding) when the page pans

Member Avatar for matricol

#header {
position: fixed;
z-index: 200;
}
also with right:0 or bottom :0 wherever you like it to be

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.