I have a question about, how i can use a class for an jquery action.

Here my example:

2. .balken {
3.     height: 100px;
4.     width: 100%;
5.     background-color: white;
6.     border-top: 5px solid lightskyblue;
7.     display: flex;
8. }

This is a bar at the top, in it is a picture and a navigation bar, you can see that they a in a flexbox.

2. .sticky {
3.     height: 50px;
4.     position: fixed;
5.     border-bottom: 2px solid red;
6.     border-top: 0px;
7. }

When you will scroll, the class sticky will be added to the .balken. This means the height will reduzed to 50px.

This is the script for it and it works!

2. $(document).ready(function(){
3.   $(window).scroll(function() {
4.     if ($(document).scrollTop() > 50) {
5.       $('.balken').addClass("sticky");
6.     } else {
7.       $('.balken').removeClass("sticky");
8.     }
9.   });
10. });

Now i want to do this with the navigation bar, i want to change the padding:

2. ul.nav li a {
3.     display: inline-block;
4.     color: black;
5.     padding: 24px 26px;
6.     text-decoration: none;
7.     transition: 0.3s;
8.     font-size: 30px;
9.     text-align: center;
10. }

and the sticky:

2. .stickynav {
3.     padding: 10px 14px;
4. }

Now i tried to do this like this:

2. $(document).ready(function(){
3.   $(window).scroll(function() {
4.     if ($(document).scrollTop() > 50) {
5.       $('.balken').addClass("sticky");
6.       $('ul.nav.li.a').addClass("stickynav");
7.     } else {
8.       $('.balken').removeClass("sticky");
9.       $("ul.nav.li.a").removeClass("stickynav");
10.     }
11.   });
12. });

But this isn't working. So my question is, how can i edit the ul.nav li a? Is this even possible and how?

I hope you can help me!

Best regards,

D4niel