Question

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

如果可能的话，我想使用简单地改变当前div的类的jQuery。动画将通过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

导航标签（使用列表或表格，无关紧要）
部分（标有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样式，以便我们注意到我们处于此特定部分。

<强> FINAL

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

滚动到div顶部时菜单标签动画

2 个答案: