Unexpected behavior with the nav bar

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

2/10/2019 12:01:20 PM

Seniru Pasan

4 Answers

New Answer


//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


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


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


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