I’ve been working on my portfolio… I feel inspired recently seeing everyone work so hard.
One thing that I’ve programmed in is some behavior of my nav bar. Here’s what I want it to do:
- by default it is not visible. This is set in CSS
- when the user scrolls down and the distance scrolled is greater than 150, the nav bar will fade in. This is determined in JS, and the css
opacityproperty is set to
- when the user scrolls up the page back to the top and we get less than 150 distance from the top, the nav bar will hide. Also determined in JS, and css
The behavior I expect is that the the user could still hover over the nav bar even when it is hidden. This is how it is in default, however, after the JQuery fires and sets the opacity based on scroll, the hover behavior from css doesn’t work.
What I want to fix:
Anytime the user hovers over the nav bar, I want it to become visible if it is hidden. By default it works, after scrolling down and up again it does not.
I feel like I need some fresh eyes on the issue. I’m a little tired, too… doesn’t help. Would appreciate any help!
What I’ve tried that didn’t work:
- event listener in JS for hover.
- add and remove classes with Jquery rather than set
I’ve isolated the issue in this codepen: https://codepen.io/dcookwebdev/pen/aGVVwm