

jQueryに関して質問させてください。  
下記Gナビをスクロールすると、ヘッダーの上部に固定するプログラミングをしています。

[code]

    <nav class="g-nav">
     <div class="nav-innner">
      <ul class="g-nav-menu">
       <li>HOME</li>
       <li>概要</li>
       <li>特長</li>
       <li>例</li>
      </ul>
     </div>
    </nav>
    
[/code]

【jQuery】

[code]

    $(function() {
    var gNav = $(".g-nav");
    var gNavOffset = gNav.offset();
    
    $(window).scroll(function () {
    if($(this).scrollTop() > gNavOffset.top && gNav.hasClass('fixed') == false) {
    gNav.css({"top": '-70px'});
    gNav.addClass('fixed');
    gNav.animate({"top": 0},500);
    }
    else if($(this).scrollTop() < gNavOffset.top && gNav.hasClass('fixed') == true){
    gNav.removeClass('fixed');
    }
    });
    });
    
[/code]

jQueryの2行目の.g-navとなっている箇所を、.g-nav li のような形で設定する方法はないでしょうか。

.gnavのliのデザインをcssを付与することで変更したいです。

また、.fixedというcssを追加して固定する仕組みなのですが、こちら、例えば.fixed001というcssも同時に追加するにはどのように記述すればよろしいのでしょう。

ご存知の方、ご教授くだされば幸いです。


CC BY-SA 3.0
2017-05-25T05:35:53.393
35002
2017-05-25T10:10:25.100
23361
question
jquery
jQuery初心者です。


.g-nav li のような形で指定は ’>’（子セレクタの指定）を使い

[code]

    $(".g-nav-menu>li").css({"display":"inline-block"});
    
[/code]

のように指定します。  
クラスの複数設定は(.fixedと.fixed001の追加)

[code]

    $(".g-nav-menu>li").addClass("fixed").addClass("fixed001");
    または、$(".g-nav-menu>li").addClass("fixed fixed001");
    
[/code]

です。  
参考までに、position: fixedを使わない、（jQueryを使って、）ヘッダーを上部に固定する一番単純な方法は、クラス g-nav
付いているブロックへ position:relativeを設定し クラス g-nav 付いているブロックのtopへ
windowスクロール移動値を設定すればよいです。（実際動作は、上下にガタガタしますが。）

[code]

    $(function() {
    $(".g-nav-menu>li").css({"display":"inline-block"});
    var gNav = $(".g-nav");
    //var gNavOffset = gNav.offset();
    
    $(window).scroll(function () {
      gNav.css({"top": $(this).scrollTop()});
    //if($(this).scrollTop() > gNavOffset.top && gNav.hasClass('fixed') == false) {
    //gNav.css({"top": '-70px'});
    //gNav.addClass('fixed');
    //gNav.animate({"top": 0},500);
    //}
    //else if($(this).scrollTop() < gNavOffset.top && //gNav.hasClass('fixed') == true){
    //gNav.removeClass('fixed');
    //}
    });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <body>
    <nav class="g-nav" style="position: relative">
        <div class="nav-innner">
            <ul class="g-nav-menu">
                <li>HOME</li>
                <li>概要</li>
                <li>特長</li>
                <li>例</li>
            </ul>
        </div>
    </nav>
    <div style="height: 3000px;">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    </div>
    </body>
[/code]


CC BY-SA 3.0
2017-05-25T09:20:18.607
35008
2017-05-25T10:10:25.100
2017-05-25T10:10:25.100
22793
22793
35002
answer