I’m just curious if any sitpeoint members have some links to tutorials on certain website features.
The first will be when you scroll down your website, the header area (e.g. logo/navigation) fade into becoming position:fixed; and scroll with you. This will unstick upon scrolling back to the top of hte page.
Edit: Got the jquery code for this from this article
If anyone has quick tutorial links to these that’d be great. I don’t need the code handed to me.
Thank you - you may have just missed my edit. I found a good article describing hte jquery for that. I only need advice on how to keep a div in its current position, yet “sticky” on scroll. I don’t want the display or anything of that changed - I only want it to stay in view upon scroll.
I think the only way to do this is by editing the css to position absolute/fixed…
if you only want the div to change position at a certain scroll point, you could use js to add a css class to the div
I’m well aware of position:fixed, yet that position is based off the viewport (
<html> ) and that is just not going to work for me. Thank you for your input. I’m debating whether I even want the sidebar fixed now…
The sticky navigation isn’t working (blue nav.)
It’s supposed to add class “scroll” upon scrolling. It doesn’t. My console says “Uncaught TypeError: undefined is not a function”.
I have jquery included though. Can anyone help?
Does the thread I posted satisfy your requirements?
It worked for me
It works great John.
Can that JS be modified to let me use my own CSS class? Demo is up on that link. The sticky JS can be found in sticky.js, and the script to fire it is in scripts.js
I need some top padding so when it scrolls, it doesn’t overlap content (which happens) and I need the width to be 100%.
Can this JS be modified to fade into the sticky position? I want the animation.
Using a different sticky jquery code now. I just need help on getting the fadein/fadeout working if someone would be so kind .
I copied and modified the demo for future reference and will incorporate into my own sites sometime.
Looking forward to further improvements
Yes I always hated the old site. I really did. I’ve put a lot of effort into this. 6 hours Friday, 14 on Saturday and 14 on Sunday.
Now the Hamburger menu will sticky/show if JS is on. If JS isn’t on, then you get the regular menu for all screen sizes. I have made it very accessible. I’m actually close to being done - I could technically release today but might not be until tomorrow since I’ll be doing code checks for security etc. I really appreciate your kind words @John_Betong
I’ll be having the site open for peer review within th week. Feel free to comment on that when it opens up .
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.