Total Page Scroll Control

[Funkaholik]

Hi there
i’m working here on Total Page Scroll Control=))
it’s almost complete but i still have some stuff to do.

what i’m trying to acomplish:
1. if you land on the page first nav-link should be active – done.
2. if you click another nav-link it should become active – done
3. if you click a certain nav-link page should scroll to a certain element – done
4. when you scroll to a certain element (say #id) anchored link nav-link should become active – not done
5. when you scroll to a certain element (say #id) .hidden-by-default element should become visible – not done

What i don’t like here in general is JQuery)) Don’t know why but i like to hadle things without Bootstrap & JQuery.
But if i took out JQuery slow scroll disappears how i can add some slow scroll transitions?

P.S. Since we have html5 tag nav can we stack nav links without this stooped ul li ?)
And how not supported browsers will render it then?

[Shikkediel]

Here’s some code I adapted for a topic on SO that handles smooth scrolling with vanilla JS:

codepen.io/rOyVZd

[Funkaholik]

Damn .. lots of actual coding.
I’ll better stick with JQuery instead.,)

But in terms of handling page scroll with navbar can you recommend something for 4 and 5?

[Shikkediel]

I’ll have to look into it a bit more (answer edited)…

[Mottie]

Smooth scrolling will eventually become available to all browsers, and all you would need to do is add a css property, see scroll-behavior.

Current browser support @ http://caniuse.com/#feat=css-scroll-behavior

For now, you can use this polyfill to add support: https://github.com/iamdustan/smoothscroll

[Funkaholik]

Hey .. that’s a great feature.
Checked it already.
But for now i just need my nav links to become active as you scroll to a certain element.
And some hidden elements to become visible. And job is done=)

[Shikkediel]

when you scroll to a certain element (say #id) anchored link nav-link should become active – not done

Isn’t this the code at the bottom? Could be a bit shorter though – and you could combine it:

$(function() {
  $('.scroll').click(function(e) {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var destination = $(this).attr('href');
    e.preventDefault(); //-- the hell is this e --//
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 750);
  });
});

[Shikkediel]

Could you maybe elaborate on the fifth point – is this hidden div connected of the other anchored content somehow? Or should it be shown whenever it comes into view of the screen…

Edit – if you use .scroll for both, it’s not a good idea to name the other elements like this.

codepen.io/NpYepa

[Funkaholik]

yep .. but it becomes active only if you click on a nav link
but if you just scroll the page first nav link always will be active,
and i want it to change .. say you’ve scrolled to a div with id = “two” and second nav link now active and so on.

And about hidden element .. let’s put it into a second div like so and make it visible as you scroll to that div.
You saw that transitions/animation that happens after you scroll to a certain area?

[Shikkediel]

it’s not a good idea to name the other elements like this

Actually, you could if you have a reason for it:

$('.scroll').not('.frames').click(function(e) {

What you describe in your previous post becomes complicated very quickly…
I know because it took a while to coordinate this pen:

http://codepen.io/Shikkediel/pen/avdyWx

I’ll have a look if I can adapt it to your use case without too much hassle.

Did not notice the transition you mentioned by the way.

[Shikkediel]

Here’s a fork with some adjustments:

codepen.io/JWLzOZ

[Funkaholik]

Yoooooo .. great job on this one, Mr. Total Scroll Control.,)

[Shikkediel]

Lol, you don’t wanna know how many hours I spent on the scroll event in general. It’s pretty ridiculous.

[Funkaholik]

At least you didn’t spent those hours looking for a typo in your code, like i remember did a few times. That’s definitely not a good way to spent time!)
Anyway thanx again ^_^

[Shikkediel]

No problem, let me know if you hit a stump when you try to adapt it further.
I’ve spent several days on a few lines of PHP once, so I know the feeling. :-/

[Author]

Posts