滚动到 div 顶部时的菜单选项卡动画

Question

我正在尝试制作这个导航栏：http://greektourguide.gr/。当您向下滚动到特定 div（具有特定 ID）时，当前选项卡会更改 class 以显示您所在的部分。

如果可能的话，我想使用 jQuery 来简单地改变当前 div 的 class。动画将通过 CSS 转换完成。

感谢您的帮助 ;)

编辑

我已经在下面给出了解决方案。我的 .scrollTop() 功能无法正常工作。感谢 Mohamed-Yousef 现在可以工作了。玩得开心;)

编辑

最后，解决方案仍然无效...所以我发布了一个标记为答案的新解决方案；）

Answer 1

感谢 Mohamed-Yousef 使我的 .scrollTop() 函数出于某种原因工作，我终于找到了解决方案。

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();
        }
    });
});

我们开始了！现在，当页面位于页面的特定重要部分（或 div，如果您不使用 HTML5）时，您将拥有流畅的选项卡动画。玩得开心！

Answer 2

更新

我已经在此处更新了答案，因此它确实有效！

HTML

我们需要一些基本的 html 规则来使用 jQuery

导航选项卡（使用列表或 table，无关紧要）
部分栏目（标有ID）
选项卡中引用部分 ID 的锚点

示例：

<!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

那个 jQuery 脚本将完美地处理相对部分高度。为此，我们需要：

计算所有部分顶部和底部的函数
验证滚动位置是否在它们之间的函数
将 .current class 添加到当前部分的选项卡
绑定事件，因此我们在滚动时重新计算滚动位置，在 window 调整大小时重新计算部分高度

示例：

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

对于 css，只需更改 nav a.current 样式，以便我们注意到我们在这个特定部分。

决赛

要查看最终产品，请勾选THIS JSFIDDLE。

滚动到 div 顶部时的菜单选项卡动画

Menu tabs animation when scrolling to top of div

navigation

jquery

animation

header