Total Page Scroll Control

[Funkaholik]

Do you mean that they can slowdown the website if not limited?

[Shikkediel]

Potentially it could, even though it’s unlikely because of this script alone. But accumulative with other code it’s certainly possible. Optimisation’s always better.

[Funkaholik]

Keep me guessing..)
What kind of optimization?

[Shikkediel]

Throttling, in this case. :-p

[Funkaholik]

Actually i was thinkin about erasing opacity fading animation out of your script
since we have some extra from our css animations to apply + throttling)

But i still don’t understand what it does.
those fuctions can’t be firing constantly, aren’t they?
plus we can’t limit them because user going to scroll randomly so there should be no delay.

[Shikkediel]

The scroll event itself can fire up to 60 times a second when normally scrolling and likely even more when dragging the scrollbar. There will be no noticeable delay when throttling, it only brings down events to about 20 times a second. Any more is usually unnecessary.

[Funkaholik]

Hey, Edo .. hows it going?
Do you remember that pen you did?
Since you’re at the role of a magician here on this topic))
Can you add some lines so nav links would become active when user scroll to a certain section?
RIght now they become active only after you click a link.

[Shikkediel]

Hey Funk, how are you. Been a while.

I actually made a demo similar to that recently, I’ll see if I can adapt it for this over the weekend…

[Funkaholik]

Gave my eyes some rest.
Was doing other stuff which finally brought me here again)

[Shikkediel]

This is it I think:

/codepen.io/anon/pen/jRMmbe

By the way… e.preventDefault() prevents the click from instantly snapping to the section (the default behaviour with anchor links) so that it can be animated instead. Where e is the event itself – and its related data.

[Shikkediel]

Looking back through the topic, I kinda did the same thing already…

codepen.io/anon/pen/jYdYbJ

[Funkaholik]

yeah its just .. it has animation
and its conflicting with other animations in css when i try to reuse it
thats why i asked you to write script just for scroll

[Shikkediel]

Using JS’s native getBoundingClientRect is a nicer approach anyway.

[Funkaholik]

i’ve noticed that nav links become active as next window starts to appear in the bottom like here
is it possible to make a nav link become active in the middle or top of the screen if you know what i mean?

[Shikkediel]

It’s all in this line:

if (apex < gate && nadir > range)

Currently it will make an item active when its top (apex) is at the bottom of the screen or above. Change to 0.5*gate if you want it when entering the middle. The other condition is set to make it active after the item’s bottom is going beyond the height of the top menu which was stored in the range variable near the end of the script. Can also be changed to any other value you like.

[Author]

Posts