Comments on: CSS Animation: Chasing Navigation Idea https://activatesaga.com/css-animation-chasing-navigation-idea/ ActivateSaga. Content for Web Artisans. Mon, 08 Apr 2024 09:15:10 +0000 hourly 1 https://wordpress.org/?v=4.8.24 By: tysweezy https://activatesaga.com/css-animation-chasing-navigation-idea/#comment-17111 Tue, 22 Apr 2014 23:57:00 +0000 http://activatesaga.com/?p=80#comment-17111 Thanks for the feedback and demonstration. Awesome points made. About the browser support, I considered that. http://caniuse.com/#search=animations. I was also thinking of providing a fallback for older browsers; degrading gracefully. However, I’m sure there are better ways to avoid getting “hacky” and have bloated code.

]]> By: davidcrandall99 https://activatesaga.com/css-animation-chasing-navigation-idea/#comment-17110 Tue, 22 Apr 2014 23:12:00 +0000 http://activatesaga.com/?p=80#comment-17110 It’s a clean animation, but consider this: your code is an absolute position. This means, you would have to use JavaScript to not only update the position of #menu, but re-trigger the animation. Instead of using CSS animations, use transitions. This is good for a couple reasons:
1) You can set the transition to effect the top position of #menu, so all JS needs to do is update one value, and the animation automatically triggers.
2) If CSS animations aren’t supported by a browser, you’re out of luck. If they don’t support transitions, #menu will behave similarly to a fixed navbar without actually being fixed.

3) Whether or not you use animations or transitions, you need to figure out how you want the #menu bar to function when the user scrolls down AND up. When you can determine that with JavaScript, you can apply a separate class with the transition when scrolling down, and have a different class, or no class, be applied when scrolling up.

I made a slightly modified version of your codepen to demonstrate: http://codepen.io/anon/pen/CvGzs

Notice when you scroll down, the #menu bar appears nice and smoothly, but when scrolling up, it acts like a fixed bar, even though it’s position is absolute.

]]>