CSS delays in changing the visibility of an element from `visible` to `hidden`

Question

I have a navbar that contains three elements. Horizontally, from left-to-right, they are: socialMediaIcons, logoArea, and navBarOptionsList.

I wrote javascript and CSS such that, when the user begins to scroll down the page, the socialMediaIcons and navBarOptionsList's visibility change to hidden.

The problem is, the socialMediaIcons element lags by about half a second to become hidden after the user scrolls down. The navBarOptionsList hides immediately after even slightly scrolling down the page (this is the expected behaviour -- and it is what I'd like the socialMediaIcons to do too).

Below is the CSS (which is where I suspect the problem is), as well as the Javascript (detailing the logic for hiding the two elements) and HTML:

HTML:



    
        
        
        

        
        
        

        
        
        
        

        
        

        
        
        Codigo Initiative
    

    

        

            
                
                    
                    
                    
                    
                    
                
            

            
                
            

            
            
              
                  
                      Home
                  
                  
                      Resources
                  
                  
                      Curriculums
                  
                  
                    Contact
                
              
            

            
                
                    ☰
                        
                            Home
                            Resources
                            Curriculums
                            Contact

CSS:

/*Hamburger Icon styling*/

.hamburgerIconNavOptions{
    color: white;
    padding-top: 20px;
}

/*Styling for the hamburger icon (which is really a list)*/
.hamIconNavOptionsList{
    margin: 0;
    padding: 0;
    list-style: none; /*removing the bullet point*/
}

/*styling the nested list in the hamburger icon*/
#hamburgerIconNavOptionsNestedList{
    margin: 0;
    padding: 0;
    list-style: none; /*Removiing the bullet points*/
    background-color: #13204f;
    opacity: .5; /*Making this bad boy transparent. (0 is completely transperent, 9 is solid black)*/
}

/*Removing the default underlining provided by the anchor tag's default styling*/
.navOptionAnchorItem{
    text-decoration: none; /*Removing the default styling from the anchor element*/
    color: white;
}

/*Removing the underlining of links provided by the anchor tag's default styling*/
.navOptionAnchorItem:link { 
    text-decoration: none; 
} 

/*Removing the underlining that occurs by default on anchor tags when hovering over them.*/
.navOptionAnchorItem:hover { 
    text-decoration: none; 
}

/*Styling each list item within the hamburger icon's nested list*/
.hamburgerIconNavOptions{
    float: left;
    width: 200px;
    height: 40px;
}

@media(max-width: 1200px) {
    /*This logic will execute when the screen's width becomes too small to display everything*/
    .socialMediaIconList{
        display: none; /*Will hide the list items when the screen's width is too small to display them*/
    }

    .socialMediaIconList.toggleCls{
        display: none; /*will remove the social media icon list if the screen isn't wide enough to display it*/
    }

    .hamburgerIconSocialMedia {
        display: none; /*TODO: Don't really need a hamburger bar to begin with. Need to come back and remove this.*/
    }

    /*Same stuff as above, except for the navBar options list*/
    .navbarOptionsList{
        display: none;
    }

    #hamburgerIconNavOptionsNestedList.toggleCls{
        display: block;
    }

    /*The screen is too small. But hide the nested list that belons to the hamburger icon. Will be displayed when the hamburger icon is clicked.*/
    #hamburgerIconNavOptionsNestedList{
        display: none;
    }
}

/*Make the hamburger icon disappear when the screen is large enough to display all list view items*/
@media(min-width: 1199px) {
    .hamIconNavOptions{
        display: none; /*Hides the hamburger icon when the screen is large enough to display everything*/
    }

    .socialMediaIconList{
        display: initial; /*Shows the social media links*/
    }

    .navbarOptionsList{
        display: initial;
    }
}

.navBar {
    display: flex;
    flex-direction: row; /*Aligns items horizontally*/
    flex-wrap: nowrap; /*Prevents overflow wrapping. We'd rather everything get packed on a single row.*/
    padding: 10px;
    background-color: #13204f;
    height: 125px;
    position: fixed;
    width: 100%;
}

.socialMediaNavBarArea {
    position: relative; 
    width: 25%;
    padding: 30px 0;
    text-align: center;
}

.logoArea {
    position: relative; 
    width: 50%;
    text-align: center;
}

.navBarOptionsAreaFullScreen {
    position: relative; 
    width: 30%;
    padding: 30px 0;
    text-align: center;
    font-size: 15px;
    padding-right: 30px;
}

/*Social Media area*/
 .socialMediaIcon {
    list-style: none;
    margin: auto; 
    display: inline-block;
    font-size: 10px;
    padding: 10px 10px;
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    transition: .5s;
}

.socialMediaIconList {
    padding-left: 0px;
    padding-right: 90px;
}

.socialMediaNavBarIcons {
    top: 40%;
    left: 50%;
    transform: translate(-53%, -50%);
    position: absolute;  
}

.socialMediaIcon:hover {
    color: #565759;
    border: 1px solid #565759;
    transition: .75s;
} 

/*Navigation Bar logo area*/
#navBarLogocaster {
    max-width: 100%;
    max-height: 75%;

    /*Aligns the image center horizontal and vertical*/
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

/*Navigation Bar options area*/
.navItem {
    display: inline;
}

.placeholder {
    height: 5000px;
}

.navLink {
    padding: 5px;
    color: white;
}

.navLink:hover {
    text-decoration: none;
    color: #565759;
    transition: .75s;
}

Javascript:

/**
 * The following logic controls what will happen when the user scrolls down on the screen.
 * The navbar will decrease in heigh slightly.
*/
window.onscroll = function() {configureNavBar()};

function configureNavBar() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        //The user is scrolling down, so minimize the nav bar, and hide all corollary navbar items to reduce clutter.
        document.querySelector(".navBar").style.height = "90px";
        hideSocialMediaIcons();
        hideNavBarOptions();
  } else {
        //The user has scrolled back up to the top. Display all corollary navbar options/details.
        document.querySelector(".navBar").style.height = "120px";
        unhideSocialMediaIcons();
        unhideNavBarOptions();
  }

}

/**
 * Will hide the social media icons (if it is even being displayed at all)
 */
function hideSocialMediaIcons() {
    let socialMediaIconList = document.querySelector(".socialMediaIconList");

    //If the social media icons are being displayed, hide them.
    if(socialMediaIconList.style.visibility != "hidden") {
        socialMediaIconList.style.visibility = "hidden";
    } else {
        //no further action needed, as the social media icons are already hidden.
    }
}

/**
 * Will hide the navbar's (full-screen) options when scrolling down.
 */
function hideNavBarOptions(){
    let navBarOptions = document.querySelector(".navbarOptionsList");

    //If the social media icons are being displayed, hide them.
    if(navBarOptions.style.visibility != "hidden") {
        navBarOptions.style.visibility = "hidden";
    } else {
        //no further action needed, as the social media icons are already hidden.
    }
}

user_7972933 · Answer

Because there is transition duration set for socialMediaIcon class but for .navBarOptionsList no duration set.

CSS delays in changing the visibility of an element from `visible` to `hidden`

1 Answers