這是什麼效果以及如何製作它？（在導航欄和滾動條上淡入淡出）

我對前端技術（HTML，CSS，JavaScript，Bootstrap）還算滿意。而且我知道如何製作響應式網站。這是什麼效果以及如何製作它？（在導航欄和滾動條上淡入淡出）

，我想創建一個新的水平的東西，有兩件事情：

1）彈出屏幕上，當用戶滾動通過超大屏幕（屏幕的第一部分）一個導航欄。

類似這樣的： https://metrica.yandex.com/about？

我有和bootstrap一樣的概念。檢查了這一點： http://imgur.com/WzNAT0S

我想要當用戶滾動通過「關於應用」部分後導航欄彈出窗口。

2）使元素淡入爲用戶向下滾動

像這樣： https://metrica.yandex.com/about/（向下滾動，元素淡入/移動中）

如何實現這兩種效果？甚至這些效果的名稱是什麼？

我知道HTML，CSS，Bootstrap，JavaScript和jQuery以及一點Angularjs。

編輯：我不想在滾動時更改導航欄。當我傳遞一個元素時，我想讓導航欄專門彈出。

來源

2017-08-28 IkePr

1）當用戶滾動通過jumbotron（屏幕的第一部分）時，在屏幕上彈出的導航條。

$(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）使元素淡入爲用戶向下滾動

您可以使用類似的方法來創建時尚，實際上只是創建不同的股利和使它們顯得/上的滾動消失基地用戶

來源

2017-08-28 12:04:19

您可以使用jQuery .scrollTop()函數。基本上告訴瀏覽器，當你達到一定的垂直位置（200）時，它應該做一些事情，比如添加一個類或任何你想要的。

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

我使用的安娜拉爾森此代碼段爲參考，當我不得不做淡入動畫。也許它也會幫助你。

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

來源

2017-08-28 12:11:13

這是什麼效果以及如何製作它？ （在導航欄和滾動條上淡入淡出）

回答

相關問題

這是什麼效果以及如何製作它？（在導航欄和滾動條上淡入淡出）