Forums

Give help. Get help.

  • # March 21, 2017 at 7:40 am

    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?

    # March 21, 2017 at 8:13 am

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

    codepen.io/rOyVZd

    # March 21, 2017 at 10:27 am

    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?

    # March 21, 2017 at 12:50 pm

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

    # March 21, 2017 at 6:37 pm

    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

    # March 22, 2017 at 2:23 am

    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=)

    # March 22, 2017 at 2:30 am

    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);
      });
    });
    
    # March 22, 2017 at 2:38 am

    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

    # March 22, 2017 at 3:20 am

    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?

    # March 22, 2017 at 3:40 am

    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:

    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.

    # March 22, 2017 at 4:24 am

    Here’s a fork with some adjustments:

    codepen.io/JWLzOZ

    # March 22, 2017 at 4:29 am

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

    # March 22, 2017 at 4:55 am

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

    # March 22, 2017 at 5:13 am

    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 ^_^

    # March 22, 2017 at 5:17 am

    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. :-/

Viewing 15 posts - 1 through 15 (of 51 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag