質問: init(); /* $("header").addClass("smaller"); } else if ( $(window).scrollTop() < y ) { //それ以外の時にheaderがsmallerを持っていたら外しましょう $("header").removeClass("smaller"); } else if ( $(window).width() < x ) { $("header").removeClass("smaller"); } else { $("header").addClass("smaller"); } }); console.log( $(window).scrollTop(),width); /*window.addEventListener('resize', function(e){ if ( width < x ) { //widthがx(768)より小さい $("header").removeClass("smaller"); } else if ( $(window).scrollTop() < y ) { $("header").removeClass("smaller"); } else if ( $(window).width() < x ) { $("header").addClass("smaller"); } }); } */ ``` いろいろと追記を変更してみました。 追記4のように書き直してみまして良さそうだなと思ったのですが、 やっぱり768px以下の際にスクロールすると headerにsmallerがついてしまいます。 このsmallerがつくと、ウィンドウがスクロールの際にカックンとなり、 ちょっとページ内リンクにいきなりとんだような動作をします。 そのため、メニューバーの表示にズレが生じるなど問題があります。 コンソールログも入れてみたのですが、 良くわからなかったです。 いろいろ頑張ってみたのですが、 どんどん改悪してしまいました。 【追記5】 すみません、こちらの件ですがどなた様か ジャストで答えと簡単で良いので解説をご教示いただけないでしょうか。 ずっと解にたどり着くよう導いてきてくださいましたtimy様に ご指南頂くのが本来ベストかと思いますが、 人それぞれに多様な思想、思惑がおありだと思いますので、 無理をお願いするのもと思いまして・・・ 本当に申し訳ございませんが、 何卒よろしくお願い申し上げます。
回答: ``` window.addEventListener('scroll','resize',function(e){ ``` このコールの仕方がまずありえないですよね。指定するイベントタイプは一つです。 if文の条件式を2つカンマで区切っているのもNGです。 ``` window.addEventListener('scroll', function(e){ if ( $(window).scrollTop() > px_change){ $("header").addClass("smaller"); } }); window.addEventListener('resize', function(e){ if ( x <= y ) { $("header").removeClass("smaller"); } }); ``` scrollイベント、resizeイベントをそれぞれ書いてやればOKなはず。 > > スクロールすると適度な位置でヘッダーを縮小されて上部にfixedされ、 > > ウィンドウ幅768px以下にした場合にはその際に付与されたクラスを外す > > > この文章の表現通りならこうなると思いますが実際は「スクロールを戻した時」「ウィンドウ幅を広げた時」の対応もおそらく必要ですよね。