tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【 javascript 】スライドしてフッダー固定

f:id:okinawanpizza:20200130001442j:plain

 

       let menu_y = $('#menu').offset().top;

       let scroll_y = window.pageYOffset ;

       let head_to_menu = menu_y - scroll_y;

       let menu_h = document.getElementById("menu").scrollHeight;

       let window_h = window.innerHeight;

       let stop_line = window_h - menu_h;

 

   if (scroll_y > menu_h){

      if (stop_line > head_to_menu) {

          $('#menu').addClass('fixed');

       }

 } else if(scroll_y < menu_h) {

        $('#menu').removeClass('fixed');

 }

 

ヘッダーが特定の位置にくると、fixedクラスをつけて固定し、

スクロールが要素の高さよりすくなくなると、fixedを外す処理を行なっています。

 

忘れない様にメモメモ