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

我正在尝试制作此纳维巴：http：//greektourguide.gr/。当您向下滚动到特定的DIV（具有特定ID）时，当前的Tab更改类别以显示您在哪个部分。

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

感谢您的帮助;）

编辑

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

编辑

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

感谢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）时，您将拥有一个平滑的选项卡动画。玩得开心！

update

我已经在此处更新了答案，所以它可以真的有效！

html

我们需要一些基本的HTML规则才能与JQuery合作

导航选项卡（使用列表或表，没关系）
一些部分（标有ID）
锚定在标签中，指的是iDS 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

要查看最终产品，请检查此jsfiddle 。

相关内容

最新更新

热门标签：