質問: 200; // 切り替わるタイミング if ($(window).scrollTop() >= headerChangeHeight) { $('#lower_header').slideDown('fast'); } else { $('#lower_header').slideUp('fast'); } } } ``` ですが、思うような結果が得られません。 1024px以下にリサイズすると、#lower_headerが表示されません。 1025px以上にリサイズすると、#lower_header_navが表示されません。 また、発生条件がわからないのですが、1024px以下にリサイズした後、ドロップダウンしてしまうことがあります。 また同様に、1025px以上にリサイズした後、ドロップダウンが一瞬になる(スライドしない)ことがあります。 調べたり試したり、思いつく限りのことをしましたが、自力では解決できませんでした。 だいぶ混乱しており恐縮ですが、どなたかご教示いただければ幸いです。 よろしくお願いいたします。 ### 補足情報(言語/FW/ツール等のバージョンなど) Google CDN jQuery 3.1.0 を利用しています。 回答を得やすくするため、他サイトでも同様の質問をしています。
回答: こんな感じでどうでしょう。 ``` $('#main_header_nav li, #lower_header_nav li').hover(function() { if ($(window).width() > 1024) { $('>ul', this).stop(true, true).slideDown('fast'); } else { $('>ul', this).stop(true, true).slideDown('fast'); // とりあえず表示させています。 } }, function() { if ($(window).width() > 1024) { $('>ul', this).stop(true, true).slideUp('fast'); } else { $('>ul', this).stop(true, true).slideDown('fast'); // とりあえず表示させています。 } }); $('#sp_menu_open, #sp_menu_close').click(function() { $('#lower_header_nav').animate({ width: 'toggle' }); }); changeHeader(); $(window).scroll(changeHeader); function changeHeader() { if ($(window).width() > 1024) { var headerChangeHeight = 200; // 切り替わるタイミング if ($(window).scrollTop() >= headerChangeHeight) { $('#lower_header').slideDown('fast'); } else { $('#lower_header').slideUp('fast'); } } else { $('#lower_header').slideDown('fast'); // とりあえず表示させています。 } } ```