How can i get a fixed-position top navigation bar ?

[benpptung]

Currently, I've found I can only get the fixed position top navigation bar if the transform:translate3d is disabled.

I am wondering if this is a correct way to do it. or Any suggestion to get a navigation bar fixed to top?

[riyantowibowo]

put top navigation into outside of snap content

[benpptung]

Hi iyasayariyan,

Thank you for reply :) I am sorry my question is unclear. I hope the fixed navigation bar is also snapped when I click the toggle button like the demo on your website. In the current demo, the navigation bar will be out of the viewport if scroll down.

[sinsunsan]

I think it' related to this problem https://github.com/jakiestfu/Snap.js/issues/24 http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

Unfortunaltely, I have not seen any solution for using both fixed positioning and snap.js. It's a rather common cases no ? So what to do ?

[goloroden]

+1

[EnSabanNur]

+2

[heyaustinwood]

+3

[diogo15]

+4 i made it fixed, but it looks kind of weird cause it doesnt move to the right, but looking at "mmenu" as reference, their approach is really buggy.

[dimention]

just commited a feature for fixed navbars in my forked repo: https://github.com/dimention/Snap.js

Usage: Put your fixed navbar outside of your snap content div and add it as a elementMirror property, something like this:

var snapper = new Snap({
   element:       document.getElementById('content'),
   elementMirror: document.getElementById('navbar'),
});

navbar will stay at fixed top position and will be snaped with your snap content as you'd expect :)

[hemedani]

how can add elementMirror in angular-snap.js ??