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

【问题标题】：Menu tabs animation when scrolling to top of div滚动到 div 顶部时的菜单选项卡动画
【发布时间】：2015-05-05 20:44:00
【问题描述】：

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

如果可能，我想使用 jQuery 来简单地更改当前 div 的类。动画将使用 CSS 过渡完成。

感谢您的帮助；）

编辑

我在下面提出了一个解决方案。我的.scrollTop() 功能不起作用。现在感谢 Mohamed-Yousef。玩得开心;)

编辑

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

【问题讨论】：

stackoverflow.com/questions/15798360/… 看看这个 .. 对于特定的 div 使用 $('your_div') .offset().top
你能举一个上下文例子吗？我试图合并它，但似乎我的 .scrollTop() 函数不起作用......我需要一个特殊的插件吗？
jsfiddle.net/ZyKar/2074 这个例子让你知道如何使用滚动的概念..不要忘记在你的html代码中包含jquery库..祝你好运
谢谢！绝对有效！也刚刚学会了 .outerHeight() ;) 将尝试将其重新合并到我的网站中。
谢谢！我找到了解决办法！

标签： jquery animation header navigation

【解决方案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）时，您就有了流畅的选项卡动画。玩得开心！

【讨论】：

天哪，谢谢！我不知道我在这里的运气如何，但我正在寻找完全相同的网站示例！再次感谢！
我有那么笨吗？我才意识到我才是真正回答这个问题的人......
不要这么说..您已经努力寻找解决问题的方法并找到正确答案..所以它应该检查为正确答案..即使您发布答案。 . 2nd 不要为自己考虑现在或以后有其他人来这个网站.. 这对他找到正确的答案很有用.. 所以你做得很好.. :)
谢谢 ;) 但是我仍然很愚蠢，因为我不记得已经回答了这个问题......而且它实际上似乎不起作用，所以我正在努力（在变得更有经验之后） )
在变得更有经验之后，你会发现你以前的代码并不像你想象的那样专业..但在它完成工作的时候..所以在你找到正确的代码之后..编辑您的答案并将其作为正确答案进行检查.. 可能对其他人有所帮助.. 祝您好运:)

【解决方案2】：

更新

我已经在这里更新了答案，所以它可以真的工作！

HTML

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

导航选项卡（使用列表或表格，无所谓）
某些部分（标有 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 类添加到当前部分的选项卡中
绑定事件，以便我们在滚动时重新计算滚动位置，在调整窗口大小时重新计算部分高度

示例：

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。

【讨论】：