ページ内の一定の高さまでスクロールしたらヘッダー位置が固定されるナビゲーションを作っているが、jQueryで設定したセレクタを追加したらヘッダーの幅が変わってしまうため変わらないようにしたい

Question

ページ内の一定の高さまでスクロールしたらヘッダー位置が固定されるナビゲーションを作っているのですが、jQueryで、設定したセレクタを追加したらヘッダーの幅が変わってしまいます。幅が変わらないようにするにはどうすればよいのでしょうか。

画面をスクロールしてclass="logo_area"のbottomにウィンドウ上部が到達したらjQueryを利用してclass="head_menu"に.fixedを追加してヘッダーが固定されるようにしました。
ヘッダー自体はちゃんと固定されるのですが、固定した際にheaderの幅があらかじめbody{}で設定してある１９２０pxから1866.670pxに縮んでしまいます。
ヘッダーを固定しても幅が1920pxのままにするようにしたいです。

        <h1 class="logo_area">
            <a href="top.html"><img class="logo" src="img/logo.png" alt=""></a>
        </h1>
        <header class="site-header">
            <nav class="head_menu">
                <ul>
                    <li class="head_list"><a href="#">aaa</a></li>
                    <li class="head_list"><a href="#">bbb</a></li>
                    <li class="head_list"><a href="#">ccc</a></li>
                    <li class="head_list"><a href="#">ddd</a></li>
                    <li class="head_list"><a href="#">eee</a></li>
                </ul>
            </nav>
        </header>

.logo_area{
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content:center;
    align-items: center;
}
.logo{
    height: 60px;
}

.site-header{
    position: relative;
}

.head_menu{
    width: 100%;
    position: absolute;
}
.head_menu.fixed{
    position:fixed;
    width:100%;
    box-sizing: border-box;
    top:0;
}
.head_menu ul{
    display:flex;
    background-color: #000;
    height: 100px;
    justify-content:center;
    align-items: center;
}

.head_list{
    font-size:25px; 
    padding-right: 50px;
}
.head_list::before{
    content: "";
    border-left: #fff solid 2px;
    padding-left: 50px;
}
.head_list:first-child::before{
    display: none;
}

//ヘッダーロゴ格納、メニュー固定
$(function(){
var _window = $(window),
    _header = $('.head_menu'),
    logoBottom;
_window.on('scroll',function(){
    logoBottom = $('.logo_area').height();
    if(_window.scrollTop() > logoBottom){
        _header.addClass('fixed');
    }
    else{
        _header.removeClass('fixed');
    }
});
_window.trigger('scroll');
});

Comments

[Lhankor_Mhy]

『固定した際にheaderの幅があらかじめbody{}で設定してある１９２０pxから1866.670pxに縮んでしまいます』とのことですが、問題が再現しませんでした。
当方でご提示のコードを試したところ、headerの幅は変わりませんでした。

ただ、.head_menu のサイズは変わっているようでしたので、そちらのことでしょうか？

Answer 1

こんにちは。

headerの幅があらかじめbody{}で設定してある１９２０pxから1866.670pxに縮んでしまいます

「headerの幅」とは.head_menu の幅のことだと推測して回答します。
サイズを指定してはいかがでしょうか。

.head_menu.fixed{
    position:fixed;
    /* width:100%; */
    width:1920px;
    box-sizing: border-box;
    top:0;
}

Comments

[syougosty]

ありがとうございます
解決しました！
width:100%:だと横幅固定されないのですね