Unexpected behavior with the nav bar

Question

Hi! I was developing a project and got this bug. In that code I have a nav bar and some content which are hidden off the screen for an effect. And the nav bar has the property position defined as fixed (position: fixed;)

The problem is when I scroll down the nav bar doesnt show the fixed behavior correctly until all of the effects are completed.

Here is the code I used for that purpose. Note that the above bug will work only for phones and small devices.

https://code.sololearn.com/Wp36Y13GmPF2/#js

Answer 1

//This is not a Css problem it's is made to be display nav after some interval or after certain scroll to bottom.

//JavaScript is not written in proper way so having trouble fixing it

Answer 2

Shudarshan Rai 👑 the nav will only change color after scrolling. And what is the problem with js? Is there any way to improve it?
Thanks

Answer 3

Seniru Pasan [OFFLINE 👎]

Here it is

line:197

if(document.body.scrollTop>784||document.documentElement.scrollTop>784) {
$(".main-nav").css({"color":"blue","backgroundColor":"#dddddd"});
} else {
$(".main-nav").css({"color":"white","backgroundColor":"transparent"});

//after 784 height scroll it is set to get background-color #dddddd, if not scrolled it gets transparent background, as default onload

Answer 4

Shudarshan Rai 👑 yes, I needed to do it. But what's the problem?