I'm a beginner at jQuery.

Let me ask you a question about jQuery.
If you scroll through the G navigation system below, it will be programmed to secure it to the top of the header.

<nav class="g-nav">
 <div class="nav-innner">
  <ul class="g-nav-menu">
   <li>HOME</li>
   <li>Overview</li>
   <li> Features </li>
   <li>Examples</li>
  </ul>
 </div>
</nav>

[jQuery]

$(function(){
vargNav=$(".g-nav";
vargNavOffset=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');
}
});
});

Is there a way to set the .g-nav part of the second line of jQuery in the form of .g-navli?

I would like to change the li design of .gnav by adding css.

Also, how can I add a css called .fixed and fix it? How can I add a css called .fixed001 at the same time?

If you know, please let me know.

jquery

2022-09-29 22:55

1 Answers

Use '>' (child selector designation) for specification like .g-navli

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

as shown in .
Multiple Class Configurations (add .fixed and .fixed001)

$( ..g-nav-menu>li a).addClass(ixfixed )).addClass( ffixed001);
Or $(".g-nav-menu>li").addClass("fixed fixed001");

Yes.
For your information, the simplest way to fix the header to the top (using jQuery) without position: fixed is to set position: relative to the block with class g-nav and to set the window scroll move value to the top of the block with class g-nav (although it actually rattles up and down).

$(function(){
$(".g-nav-menu>li") .css({"display":"inline-block"});
vargNav=$(".g-nav";
//vargNavOffset=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');
//}
});
});

<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>Overview</li>
            <li> Features </li>
            <li>Examples</li>
        </ul>
    </div>
</nav>
<div style="height:3000px;">
1 <br of >
2<br/>
3<br/>
4<br of>
5<br of>
6<br of>
7<br/>
8<br/>
9<br/>
10<br/>
1 <br of >
2<br/>
3<br/>
4<br of>
5<br of>
6<br of>
7<br/>
8<br/>
9<br/>
10<br/>
1 <br of >
2<br/>
3<br/>
4<br of>
5<br of>
6<br of>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
</body>

2022-09-29 22:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656