Menu tabs animation when scrolling to top of div

Question

I am trying to make this navbar : http://greektourguide.gr/ . When you scroll down to a specific div (with specific id), the current tab change class to show at which section you are.

If possible, I would like to use jQuery that simply changes the class of the current div. The animations will be done with CSS transitions.

Thanks for helping ;)

EDIT

I have putted a solution below. My .scrollTop() function wasn't working. Now works thanks to Mohamed-Yousef. Have fun ;)

EDIT

Finally, the solution was still not working... So I posted a new solution marked as answer ;)

http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px look at this .. for specific div use $('your_div') .offset().top — Mohamed-Yousef, May 05 '15 at 20:48
Could you please give a contextual example? I tried to incorporate it, but it seems that my .scrollTop() function doesn't work... Do I need a special plugin? — lolgab123, May 05 '15 at 23:37
http://jsfiddle.net/ZyKar/2074/ this example to let you know the concept of how to use scroll .. dont forget to include jquery library in your html code .. good luck — Mohamed-Yousef, May 05 '15 at 23:54
Thanks! Definitly works! Also just learned .outerHeight() ;) Will try to reincorporate it to my website. — lolgab123, May 06 '15 at 00:09

score 1 · Answer 1 · answered May 07 '15 at 18:58

Thanks to Mohamed-Yousef that makes my .scrollTop() function work for some reason, I finally found a solution.

HTML

...somecode...
<nav>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#web">Web</a></li>
        <li><a href="#coding">Coding</a></li>
        <li><a href="#photo">Photo</a></li>
        <li><a href="#more">More</a></li>
    </ul>
</nav>
...somecode...
<section id="about">bla bla bla long height don't start at top of page...'</section>
<section id="web">same</section>
<section id="coding">same</section>
<section id="photo">same</section>
<section id="more">same</section>

CSS

nav ul li a
{
    display: block;
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 40px;
    border-bottom: solid 3px rgba(231, 76, 60, 0);
    color: #484848;
    transition: all 0.3s;
}

nav ul li a.current
{
    height: 37px;
    border-bottom: solid 3px rgba(231, 76, 60, 1);
    transition: all 0.3s;
}

Javascript (jQuery)

$(window).scroll(function () 
{
    var windowscroll = $(this).scrollTop();
    $('section').each(function()
    {
        if($(this).offset().top < windowscroll)
        {
            $("nav ul li a[href=#" + $(this).attr('id') + "]").addClass('current');
        }
        else 
        {
            $('nav ul li a').removeClass();
        }
    });
});

There we go! Now, you have a smooth tab animation when the page is at a specific important section (or div, if you don't use HTML5) of the page. Have fun!

Omg, thanks for that! I don't know what's the level of luck that I got here, but I was searching for the EXACT same website example! Thanks again! — lolgab123, Nov 20 '15 at 01:20
Am I that stupid? I just realized I'm the one who actually answered this question... — lolgab123, Nov 20 '15 at 01:21
Don't say that .. you made an efforts and search for solution to your problem and find the right answer .. so it should check as a right answer .. even if you post the answer .. 2nd don't think for yourself think about anyone else comes to this website now or later .. it will be useful for him to find the right answer .. So you made a good job .. :) — Mohamed-Yousef, Nov 20 '15 at 01:43
Thanks ;) But I'm still stupid for not remembering having answered this... And it actually doesn't seem to work, so I'm working on it (after becoming a bit more experienced) — lolgab123, Nov 20 '15 at 01:45
after becoming a bit more experienced you will find your previous code is not professional as you were think .. but in its time it done a job .. so after you reach to the right code .. edit your answer and check it as a right answer .. may it help anyone else .. very good luck to you :) — Mohamed-Yousef, Nov 20 '15 at 01:50

score 0 · Accepted Answer · answered Jan 23 '16 at 16:30

UPDATE

I've updated the answer here so it can really works!

HTML

We need some basic html rules to work with the jQuery

Navigation tabs (using list or table, doesn't matter)
Some sections (marked with an ID)
Anchors in the tabs that refers to section IDs

example:

<!DOCTYPE html>
<html>

<body id="#top">

    <nav>
        <ul>
            <li><a href="#top">Home</a></li>
            <li><a href="#web">Web</a></li>
            <li><a href="#design">Design</a></li>
            <li><a href="#photo">Photo</a></li>
        </ul>
    </nav>

    <header><h2>HEADER</h2></header>

    <section id="web"><h2>WEB</h2></section>
    <section id="design"><h2>DESIGN</h2></section>
    <section id="photo"><h2>PHOTO</h2></section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

</html>

jQuery

That jQuery script will perfectly work with relative section heights. For that, we need:

A function that calculates all section's top and bottom
A function that verify if the scrolling position is between them
Adding the .current class to the current section's tab
Binding events so we recalculate scrolling position when scrolled and section heights when window is resized

example:

var currentTab = (function () {


    //variables
    var $window = $(window),
        $section = $('section'),
        $scrollPosition = $window.scrollTop(),
        $sectionHeights = [];


    //will calculate each section heights and store them in sectionHeights[] array
    function resizeSectionHeights() {

        $section.each(function (i) {
            $sectionHeights[i] = $(this).outerHeight();
        });

    }


    /*will calculate current scroll position. If it's between the top and bottom of a section, 
      the tab containing an href value of that section id will have the .current class.*/
    function applyCurrentState() {

        $scrollPosition = $window.scrollTop();

        $section.each(function (i) {    //we indent i at each section count, so we can find it's height in sectionHeight[]

            var $anchor = $("nav a[href=#" + $(this).attr('id') + "]"),
                $sectionTop = $(this).offset().top - 1,                    // -1 get rid of calculation errors
                $sectionBottom = $sectionTop + $sectionHeights[i] - 1;    // -1 get rid of calculation errors

            if ($scrollPosition >= $sectionTop && $scrollPosition < $sectionBottom) {

                $anchor.addClass('current');

            } else {

                $anchor.removeClass('current');
            }
        });
    }


    //binding events
    $window.resize(resizeSectionHeights);
    $window.scroll(applyCurrentState);


    //initialization
    resizeSectionHeights();

}());

CSS

For the css, just change the nav a.current style so we notice that we are at this specific section.

FINAL

To see the final product, please check THIS JSFIDDLE.

Menu tabs animation when scrolling to top of div

2 Answers2