fade in/out, slide up/down methods repeating themselves/finishes too quickly

Question

im trying to make a semi-sticky navbar that shows/hides depending on the direction of user scroll, but i wether encounter issue with multiple time jumping or the animation stopping in the middle, or ending too suddenly, do you have any suggestions how can i solve this?

let basePosition = 0;

let boundLine = $('.introImg');

$(window).scroll(function(event) 
{
    let tempPosition = $(this).scrollTop();

    if(tempPosition > basePosition && tempPosition > boundLine.height())    
    {
        $('#navStick').stop(true, true).animate({ opacity : 0 }, 400);
    }
    else    
    {
        $('#navStick').stop(true, true).animate({ opacity : 100 }, 400);
    }
    basePosition = tempPosition;
});

html:

<!-- NAVIGATION BAR -->
<header>
    <nav id = "navStick" class = "navbar fixed-top navbar-light bg-light navbar-expand-md myNav">

        <a class = "navbar-brand" href = "#">
            <img src = "img/logo.png" class = "brandImg"/>
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="navSwitch">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class = "collapse navbar-collapse" id = "mainMenu">
            <ul class = "nav navbar-nav ml-auto">

                <li class = "nav-item">
                    <a class = "nav-link" href = "#"> Aktualności </a>          
                </li>

                <li class = "nav-item dropdown">
                    <a id = "motorcyclesLink" class = "nav-link dropdown-toggle" data-toggle = "dropdown" role = "button" aria-expanded = "false" id = "dropdownMenuButton" aria-haspopup ="true"> Motocykle </a>   
                    <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                        <a class = "dropdown-item" href = "#"> alfa  </a>
                        <a class = "dropdown-item" href = "#"> beta  </a>
                    </div>                                  
                </li>

                <li class = "nav-item">
                    <a id = "teamsLink" class = "nav-link"> O nas </a>          
                </li>

                <li class = "nav-item">
                    <a id = "galleryLink" class = "nav-link"> Galeria </a>          
                </li>

                <li class = "nav-item">
                    <a id = "sponsorsLink" class = "nav-link" > Sponsorzy </a>          
                </li>

                <li class = "nav-item">
                    <a id = "contactLink" class = "nav-link"> Kontakt </a>          
                </li>
            </ul>
        </div>
    </nav>
</header>

Can you give us some HTML to play with as well? – Tanner_Gram Dec 05 '18 at 20:37 — Tanner_Gram, Dec 05 '18 at 20:37

score 2 · Accepted Answer · answered Dec 05 '18 at 20:40

2

I would run an is animated to check if it was actively animating

How do I find out with jQuery if an element is being animated?

And then either ignore the new event or kill the current animation

You can use Jquery stop or finish for this probably.

https://api.jquery.com/stop/

answered Dec 05 '18 at 20:40

Tanner_Gram

1,090
9
19

Used to get hit by that a bunch when I developed Wordpress sites. Awesome! – Tanner_Gram Dec 05 '18 at 20:53

score 2 · Answer 2 · answered Dec 05 '18 at 20:51

For future developers having this problem: i just added a check if the animation is still on:

if(tempPosition > basePosition && tempPosition > boundLine.height() && !$('#navStick').is(':animated')) $('#navStick').slideUp('slow');

else if(!$('#navStick').is(':animated'))    $('#navStick').slideDown('slow');

fade in/out, slide up/down methods repeating themselves/finishes too quickly

2 Answers2