这种效果是什么，如何产生？(在滚动条和元素中渐变)

Question

我对前端技术(HTML、CSS、JavaScript、Bootstrap)相当满意。我知道如何建立响应性的网站。

我想要创造的东西，下一个层次，有两样东西：

1)当用户滚动通过大屏幕(屏幕的第一部分)时，屏幕上弹出的导航条。

就像这样：https://metrica.yandex.com/about？

我和我用引导程序创建的概念是一样的。看看这个：http://imgur.com/WzNAT0S

我想让导航条弹出后，当用户滚动通过“关于应用程序”部分。

( 2)使元素在用户向下滚动时褪色

像这样：https://metrica.yandex.com/about/ (向下滚动，元素淡入/移动)

我如何达到这两个效果？这些效应的名称是什么？

我知道HTML、CSS、Bootstrap、JavaScript和jQuery以及一些Angularjs。

编辑:我不想改变肚脐当我滚动。当我传递一个元素时，我想让导航条弹出。

Answer 1

1)当用户滚动通过大屏幕(屏幕的第一部分)时，屏幕上弹出的导航条。

$(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)使元素随着用户滚动而褪色。

您可以使用类似的方法来创建这个潮流--实际上，只需创建不同的div，并根据用户的滚动使它们出现/消失。

Answer 2

您可以使用jQuery .scrollTop()函数。基本上告诉浏览器，当您到达某个垂直位置(200)时，它应该做一些类似于添加类或任何您想要的事情。

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

当我不得不在动画中进行淡入时，我使用了安娜·拉森( animation )的这个代码片段作为参考。也许它也能帮到你。

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