What is this effect and how to make it ? (Fade in navbar and elements on scroll)

Question

I'm fairly ok with front end technologies (HTML, CSS, JavaScript, Bootstrap). And I know how to make responsive websites.

The thing that I want to create, the next level, are 2 things:

1) A navbar that pops out on the screen when the user scrolls pass the jumbotron (first part of the screen).

Something like this: https://metrica.yandex.com/about?

I have the same concept that I created with bootstrap. Check this out: https://i.stack.imgur.com/KbJqg.jpg

I want to make the navbar popout after when the user scrolls pass "About App" section.

2) Make elements fade in as user scrolls down

Like this: https://metrica.yandex.com/about/ (Scroll down, the elements fade in / move in)

How do I achieve these two effects ? What are even the names of these effects ?

I know HTML, CSS, Bootstrap, JavaScript and jQuery and a little bit of Angularjs.

EDIT: I do not want to change the navbar when I scroll. I want the navbar to popout specifically when I pass an element.

score 0 · Accepted Answer · answered Aug 28 '17 at 12:04

1) A navbar that pops out on the screen when the user scrolls pass the jumbotron (first part of the screen).

$(window).scroll(function() {    
        var ScrollTop = parseInt($(window).scrollTop());
         //console.log(scroll);
        if (ScrollTop > 290) {
            //console.log('ScrollTop');
            $(".navbar").addClass("navbar-fixed-top");
        } else {
            //console.log('ScrollTop ');
            $(".navbar").removeClass("navbar-fixed-top");
        }
    });

2) Make elements fade in as user scrolls down

You can use a similar approach to create that fad-in effect just create different div and make them appear/disappear base on the scroll of the user

score 0 · Answer 2 · edited Aug 28 '17 at 13:40

You can use the jQuery .scrollTop() function. Basically telling the browser that when you reach a certain vertical position (200), it should do something like adding a class or whatever you wish.

(function($) {
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() > 200) {
        $('#menu').slideDown(200);
      } else {
        $('#menu').slideUp(200);
      }
    });
  });
})(jQuery);

I used this code snippet by Anna Larson as reference when I had to do the fade in animation. Maybe it will help you too.

https://codepen.io/annalarson/pen/GesqK

What is this effect and how to make it ? (Fade in navbar and elements on scroll)

2 Answers2