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

时间：2022-11-05 19:46:00

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.

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

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.

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

Thanks for helping ;)

谢谢你的帮助;)

EDIT

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

我在下面提出了一个解决方案。我的.scrollTop()函数无效。现在感谢Mohamed-Yousef。玩得开心 ;)

EDIT

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

最后,解决方案仍然没有工作......所以我发布了一个标记为答案的新解决方案;)

2 个解决方案

#1

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

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

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!

我们去!现在,当页面位于页面的特定重要部分(或div,如果不使用HTML5)时,您可以获得平滑的选项卡动画。玩得开心!

#2

UPDATE

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

我在这里更新了答案,所以它真的有效!

HTML

We need some basic html rules to work with the jQuery

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

  • Navigation tabs (using list or table, doesn't matter)

    • 导航标签(使用列表或表格无所谓)

  • Some sections (marked with an ID)

    • 一些部分(标有ID)

  • Anchors in the tabs that refers to section IDs

    • 选项卡中引用部分ID的锚点

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:

该jQuery脚本将完美地与相对部分高度一起使用。为此,我们需要:

  • 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

    • 将.current类添加到当前部分的选项卡

  • 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.

对于css,只需更改nav a.current样式,以便我们注意到我们处于此特定部分。

FINAL

To see the final product, please check THIS JSFIDDLE.

要查看最终产品,请查看此JSFIDDLE。

#1

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

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

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!

我们去!现在,当页面位于页面的特定重要部分(或div,如果不使用HTML5)时,您可以获得平滑的选项卡动画。玩得开心!

#2

UPDATE

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

我在这里更新了答案,所以它真的有效!

HTML

We need some basic html rules to work with the jQuery

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

  • Navigation tabs (using list or table, doesn't matter)

    • 导航标签(使用列表或表格无所谓)

  • Some sections (marked with an ID)

    • 一些部分(标有ID)

  • Anchors in the tabs that refers to section IDs

    • 选项卡中引用部分ID的锚点

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:

该jQuery脚本将完美地与相对部分高度一起使用。为此,我们需要:

  • 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

    • 将.current类添加到当前部分的选项卡

  • 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.

对于css,只需更改nav a.current样式,以便我们注意到我们处于此特定部分。

FINAL

To see the final product, please check THIS JSFIDDLE.

要查看最终产品,请查看此JSFIDDLE。

标签：

相关文章