CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ofer dofer
ofer dofer

Reputation: 621

Highlighting the element after scrolling to it

Here is the fiddle I'm working with: http://jsfiddle.net/fz5Yk/5/

As you can see, it has a one-page scrolling navigation. I want to achieve a highlighting effect (preferably using .animate function) to the headings in <strong> </strong> tags when scrolling to a section. Just scroll the page manually and you will see a highlighting in the navigation menu; item of the scrolled section, but I can't quite resolve the js codes in order to apply the same to the headings, and an intervention in it with .animate function seems much more difficult to me. Can you help me?

Upvotes: 0

Views: 1459

Answers (1)

user1467267
user1467267

Reputation:

The plugin-page seems well-documented; https://github.com/davist11/jQuery-One-Page-Nav.

Just put an animation on the location you scroll to inside the end: definition;

$('#nav').onePageNav({
    end: function() {
        //I get fired when the animation is ending
    }
});

Test update

$(window).scroll(function() {
    var visible_start = window.pageYOffset;
    var window_height = window.innerHeight;
    var section3_height = $('#section-3').height();
    var section3_start = $('#section-3')[0].offsetTop;

    if ((visible_start - window_height >= section3_start) &&
       $('#section-3').css('background-color', 'yellow');
    }
});

Upvotes: 1

Related Questions