Tutorials on some site functions

JavaScript
1

I’m just curious if any sitpeoint members have some links to tutorials on certain website features.

  1. 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
    http://css-tricks.com/scroll-fix-content/

  2. Next I’m wondering how to use Javascript to make a column of mine position:fixed. I can’t use CSS for this due to positioning quirks. It’s floated right now but I’d like it to go into position:fixed; and scroll with you as you go down the page (so so far we have header/sidebar sticky)

If anyone has quick tutorial links to these that’d be great. I don’t need the code handed to me.

2

Maybe this thread:

3

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.

1 Like
4

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

5

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…

6

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?

http://www.codefundamentals.com/test/index.php

7

Does the thread I posted satisfy your requirements?

It worked for me :smile:

8

It works great John.

codefundamentals.com/test/

However I originally didn’t want to use that since I Notice that the Javascript appends the CSS in style=“”

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.

9

Using a different sticky jquery code now. I just need help on getting the fadein/fadeout working if someone would be so kind :slight_smile: .

10

I much prefer your new demo over your original home site. It is both functional and smooth without being flashy. The way Javascript should be used. Also pleased that you managed to sort the fonts which were far too gaudy for my liking.

I copied and modified the demo for future reference and will incorporate into my own sites sometime.

http://www.watchthatpage.com/checkWatchPages.jsp

Looking forward to further improvements :slight_smile:

1 Like
11

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.

The Javascript is pretty nifty. I’m using it to do the sticky navigation (which, if off, doesn’t sticky - no big deal).
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 :wink: .

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.