お世話になります。
jQueryで、画面幅によって処理分けしているヘッダーメニューがあります。
1025px以上でドロップダウン型、かつスクロール時に縮小版ヘッダーに切り替えます。
1024px以下でドロワー型、縮小版ヘッダーを表示します。
コードは以下の通りです。
if ($(window).width() > 1024) {
$('#main_header_nav li, #lower_header_nav li').hover(function() {
$('>ul', this).stop(true, true).slideDown('fast');
}, function() {
$('>ul', this).stop(true, true).slideUp('fast');
});
}
$('#sp_menu_open, #sp_menu_close').click(function() {
$('#lower_header_nav').animate({ width: 'toggle' });
});
if ($(window).width() > 1024) {
changeHeader();
$(window).scroll(changeHeader);
}
function changeHeader() {
var headerChangeHeight = 200; // 切り替わるタイミング
if ($(window).scrollTop() >= headerChangeHeight) {
$('#lower_header').slideDown('fast');
} else {
$('#lower_header').slideUp('fast');
}
}
上のコードだと、画面をリサイズして1024pxをまたいだときに動かなくなってしまうので、以下のように書きかえました。
dropDownMenu();
$(window).resize(dropDownMenu);
function dropDownMenu() {
if ($(window).width() > 1024) {
$('#main_header_nav li, #lower_header_nav li').hover(function() {
$('>ul', this).stop(true, true).slideDown('fast');
}, function() {
$('>ul', this).stop(true, true).slideUp('fast');
});
}
}
drawerMenu();
$(window).resize(drawerMenu);
function drawerMenu() {
if ($(window).width() <= 1024) {
$('#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');
}
}
}
ですが、思うような結果が得られません。
1024px以下にリサイズすると、#lower_headerが表示されません。
1025px以上にリサイズすると、#lower_header_navが表示されません。
また、発生条件がわからないのですが、1024px以下にリサイズした後、ドロップダウンしてしまうことがあります。
また同様に、1025px以上にリサイズした後、ドロップダウンが一瞬になる(スライドしない)ことがあります。
調べたり試したり、思いつく限りのことをしましたが、自力では解決できませんでした。
だいぶ混乱しており恐縮ですが、どなたかご教示いただければ幸いです。
よろしくお願いいたします。