I have a navigation bar with three elements arranged horizontally from left to right: socialMediaIcons, logoArea, and navBarOptionsList.
I've written JavaScript and CSS code that changes the visibility of socialMediaIcons and navBarOptionsList to hidden when the user starts scrolling down the page.
The issue is that the socialMediaIcons element takes about half a second longer to hide after scrolling compared to navBarOptionsList, which hides immediately upon scrolling even slightly. I want both elements to hide simultaneously.
Here's the suspected problematic CSS, along with the JavaScript logic for hiding the elements, and the HTML structure:
HTML:
<!DOCTYPE html>
<!-- More HTML content here -->
</html>
CSS:
/* CSS styling details */
/* More CSS styles here */
JavaScript:
/**
* JavaScript logic for handling scroll events
*/
// More JavaScript code here