https://qiita.com/gatespace/items/a9fa68dacc2e30f7f219
https://jsfiddle.net/gatespace/66hhetbr/
(function($) {
// masthead scroll
var header = $('#masthead'); // fixed DOM
var adclass = 'scrolled'; // add css class
var scrollY = 0; // scroll
$(window).scroll(function() {
if ($(window).scrollTop() > scrollY) {
header.addClass(adclass);
} else {
header.removeClass(adclass);
}
});
})(jQuery);
ありがたいコード
スクロールしたらclass名追加して、そのclass名に対して
positon:fixed;とcssアニメーションをつける
よくみたらwpフォーラムで昔見かけていた回答者の人だった
この方は簡潔に書くので無駄な情報がなく読みやすいです