FadeIn Element on ScrollUp

Question

I'm attempting to have my navbar disappear when you scroll down from the top of the page, but appear any time a user scrolls up. Right now the snippet as is fades in the navbar when you reach the top of the page, but I want it to fade in any time a user scrolls up. JSFiddle

(function ($) {
  $(document).ready(function(){
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('.navbar').fadeOut();
   } else {
    $('.navbar').fadeIn();
   }
  });
 });
});
  }(jQuery))

body {
    /* for demo purpose only */
    height:2000px;
    padding-top:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top " role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>Scroll down to activate menu bar

[This](http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event#4326907) answer should help. — sareed, Oct 08 '15 at 16:52

score 1 · Accepted Answer · answered Oct 08 '15 at 16:53

You'll have to keep track of the previous scroll position, and then figure out if the scrolling is up or down.

Something like this should work

jQuery(function ($) {
    var t = 0;

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100 && t < $(this).scrollTop() ) {
            $('.navbar').fadeOut();
        } else {
            $('.navbar').fadeIn();
        }

        t = $(this).scrollTop();
    });
});

Note that you only need one DOM ready function, not three, and in this case you don't really need any, as the window is always available.

FIDDLE

That did the job! Thanks adeneo. – Edward Oct 08 '15 at 17:20 — Edward, Oct 08 '15 at 17:20

FadeIn Element on ScrollUp

1 Answers1