###前提・実現したいこと
ホームページを作っています。
スクロールすると適度な位置でヘッダーを縮小されて上部にfixedされ、
ウィンドウ幅768px以下にした場合にはその際に付与されたクラスを外す
ようにしたいです。
JavaScriptはまだ初心者です。
###発生している問題・エラーメッセージ
スクロールして固定するスクリプト単体だと動きますが、
マージすると動かなくなります。
###該当のソースコード
■マージしてみたコード
function init() { var px_change = 300; var x = $(window).width(); var y = 769; window.addEventListener('scroll','resize',function(e){ if ( $(window).scrollTop() > px_change,x <= y){ $("header").addClass("smaller"); } else if ( $("header").hasClass("smaller") ) { $("header").removeClass("smaller"); } }); } window.onload = init();
参考にしたコード 1 元々のコードです。一定(300)までスクロールしたらsmallerをクラスに付与する
function init() { var px_change = 300; window.addEventListener('scroll',function(e){ if ( $(window).scrollTop() > px_change){ $("header").addClass("smaller"); } else if ( $("header").hasClass("smaller") ) { $("header").removeClass("smaller"); } }); } window.onload = init();
参考にしたコード 2 ウィンドウ幅でクラスを追加したり削除したりする
$(window).resize(function(){ //windowの幅をxに代入 var x = $(window).width(); //windowの分岐幅をyに代入 var y = 640; if (x <= y) { $('#colorBox').addClass('redbox').removeClass('bluebox'); $('#imageBox').addClass('morning-b').removeClass('morning-a'); }else{ $('#colorBox').addClass('bluebox').removeClass('redbox'); $('#imageBox').addClass('morning-a').removeClass('morning-b'); } });
###試したこと
ネットで調べたりしながらコードを分けて書いてみたりといろいろな書き方を試してみましたが満足に動かなかったです。
お力添えいただけますよう、何卒よろしくお願い申し上げます。
【追記 1】
ご指摘をいただきまして、コードを変更してみたのですが、ウィンドウをリサイズするとクラスが解除されて
しまいヘッダーが元に戻ってしまいました。
その後もうまくできず良くわからなくなってきてしまい、
取り急ぎ取得したいイベントの「状態・こうしたい」という形をもう具体的に追記させて頂きたく思います。
スクロールすると適度な位置でヘッダーを縮小されて上部にfixedされ、
ウィンドウ幅768px以下にした場合にはその際に付与されたクラスを外す
ようにしたいです。
1.ウィンドウ幅768px以上の時
スクロールさせた時
・スクロールしていない状態の時にはヘッダーは通常通りに表示
・一定の場所までスクロールすると別のクラスを付与
スクロールを戻した時
・付与したクラスをリムーブ、ヘッダーを元に戻します。
ウィンドウ幅768px以上の時にウィンドウ幅を変更
・スクロールさせた時、スクロールを戻した時(これは変わらないですが)の
状態と変わらない。
2.ウィンドウ幅768以下の時
スクロールさせた時、スクロールを戻した時
・ウィンドウ幅768px以下なのでクラスの付与はしない
ウィンドウ幅768px以上に変更した場合
・スクロールの位置でクラスの付与がされいる、されていない状態に
変わらなければならない
となります。
よろしくお願い致します。
【追記 2】
function init() { var y = 300; var x = 768; var scroll = $(window).scrollTop(); var width = $(window).width(); window.addEventListener('scroll', function(e){ if ( scroll > y ) { //スクロール量がy(300)より大きい時 $("header").addClass("smaller"); } else if ( $(window).scrollTop() < y ) { $("header").removeClass("smaller"); } else if ( $(window).width() < x ) { $("header").removeClass("smaller"); } else if ( $(window).width() > x ) { $("header").addClass("smaller"); } }); 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"); } }); } window.onload = init();
デベロッパーツールを見ながらやってみましたところ、
上記のコードで、
【GOOD】
①指定したスクロール量に達した際にsmallのクラスが付与できました。
②スクロールを戻すとクラスをリムーブできました。
②ウィンドウ枠を768px以下にしたところクラスがつかないようになりました。
スクロールしてもつかない状態になりました。
【BAD】
①ウィンドウ枠768px以上でかつsmallが付与されている状態でウィンドウ枠を
動かすとsmallが一旦リムーブされてしまいました。
②ウィンドウ枠768px以下でsmallがついていない状態からウィンドウ枠を戻しても
クラスが付与されません。
③ウィンドウ枠768px以下でスクロールされた状態からウィンドウ幅を広げても
元に戻らず → (つまりsmallが付与されていない?)
スクロールさせてあげなければならない。
という状況になっております。
【追記 3】
次に以下の通りにしてみました。
function init() { var y = 300; var x = 768; var scroll = $(window).scrollTop(); var width = $(window).width(); window.addEventListener('scroll', function(e){ if ( scroll > y ) { //スクロール量がy(300)より大きい時 $("header").addClass("smaller"); } else if ( $(window).scrollTop() < y ) { $("header").removeClass("smaller"); } else if ( $(window).width() < x ) { $("header").removeClass("smaller"); } else if ( $(window).width() > x ) { $("header").addClass("smaller"); } }); } window.onload = init();
【GOOD】
①指定したスクロール量に達した際にsmallのクラスが付与できました。
②スクロールを戻すとクラスをリムーブできました。
②ウィンドウ枠を768px以下にしたところクラスがつかないようになりました。
スクロールしてもつかない状態になりました。
④ウィンドウ枠768px以上でかつsmallが付与されている状態でウィンドウ枠を
動かすとsmallが一旦リムーブされていたのがリムーブされなくなりました。
【BAD】
①ウィンドウ枠768px以下でsmallがついていない状態からウィンドウ枠を戻しても
クラスが付与されません。
②ウィンドウ枠768px以下でスクロールされた状態からウィンドウ幅を広げても
元に戻らず → (つまりsmallが付与されていない?)
スクロールさせてあげなければならない。
この書き方は正しい?のでしょうか?
【追記 4】
//書き直し $(window).resize(function(){ var w = $(window).width(); var x = 768; console.log( $(window).scrollTop(),$(window).width(),w); if (x <= y) { $('header').addClass('smaller'); } else if ( $(window).scrollTop() <= 300 ) { $('header').removeClass('smaller'); } else { $('header').removeClass('smaller'); } }); $(window).scroll(function(){ console.log( $(window).scrollTop(),$(window).width(),sc); var sc = $(window).scrollTop(); var h = 300; if (h <= sc) { $('header').addClass('smaller'); } else { $('header').removeClass('smaller'); } }); //ここまで /*******************10/26ここまでダメ******************************/ /* function init() { var y = 300; var x = 768; console.log( $(window).scrollTop(),$(window).width()); window.addEventListener('scroll', function(e){ if ( $(window).scrollTop() > y ) { $("header").addClass("smaller"); } else { $("header").removeClass("smaller"); } }); console.log( $(window).scrollTop(),$(window).width()); window.addEventListener('resize', function(e) { if ( $(window).width() > x ) { //widthがx(768)より小さい $("header").addClass("smaller"); } else { $("header").removeClass("smaller"); } }); }*/ window.onload = 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様に
ご指南頂くのが本来ベストかと思いますが、
人それぞれに多様な思想、思惑がおありだと思いますので、
無理をお願いするのもと思いまして・・・
本当に申し訳ございませんが、
何卒よろしくお願い申し上げます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/19 07:44
2016/10/19 08:23
2016/10/19 09:12
2016/10/20 04:24
2016/10/20 07:41
2016/10/21 07:28
2016/10/21 15:30
退会済みユーザー
2016/10/21 15:42
2016/10/24 03:31
2016/10/24 03:58
2016/10/25 03:16
2016/10/25 10:34
2016/10/26 07:26
2016/10/26 07:45
2016/10/27 01:40