css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Your menu (or any element you choose) will stick at the top of the screen when you scroll down and it "hits" the top. IE7 and up.

Also available as a full jQuery plugin (with a few extra options) at https://github.com/senff/Sticky-Anything and a WordPress plugin at https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Comments

  1. It's a good code, but when the menu is set, an infinite loop is created and the browser displays the error css "Error in parsing value for 'width'.". I solved it deleting the line "widthOrgElement = orgElement.css('width');" and the reference of this in the next line.

  2. Thanks Hector -- that was a small bug there. I've fixed it now (removed the "px" value that was added to the width, since it already contained "px" in the variable).

  3. @senff Hey Mark. Do you think it would be more beneficial (performance wise) if we have the main function trigger on scroll instead of every 10ms?

  4. Hey @dubiel, thanks for the feedback.

    The reason why I used 10ms polling instead of on scroll, can be found here: https://medium.com/@dhg/82ced812e61c#ee02

    Having said that, I never really tested it properly and measured differences in performance, so I'm not 100% if it's actually better or not. But, from my experience, it doesn't really make that much of a difference. It's not a full-on parallax site or something, just a little checker, so I don't think it's really a big issue which method is chosen.

  5. very professional

  6. please see my code, and tell me whats the problem. http://codepen.io/Hadipour/pen/QjqbMz

  7. Really, really cool, but it doesn't work at all on mobile. I've got a design that does work on mobile, but is super slow. All you have to do is set it to change the headers css to 'position: fixed' after a certain amount of pixels from the top.

  8. JS worked great when added to my header of my bootstrap site. It's even working in mobile, unlike previous user's comment. Although I have noticed an issue with my mobile menu. The collapsed menu items disappear on scroll. Could you take a look and help me with this issue? Z-index? Overflow? I've tried everything I can think of and can't figure out the solution with this JS.

    https://printomatics.printsites.net/

  9. Thanks for this. It works well and saved me a lot of time. Great job!

  10. @beaubot My apologies, I didn't see your comment until now. Yes, it's a tricky issue that you describe -- this usually occurs when a submenu involves Javascript (having more than one element with the same ID, which is what this code does, is problematic). I'm actually working on an improved version right now. A WordPress plugin is done, I just have to transfer it into a "standard" JS plugin. Should have it done soon; if you're still interested in that, please let me know. :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...