Hide Show Columns When Sticky

Hi, this can easily be done with just a little bit of CSS. You can either use opacity, or use display: none; to “hide” things like columns, elements, etc. Opacity is self explanatory and doesn’t affect spacing or resize anything. Setting display to none will completely remove it from the page which causes things, like other columns, to shift. Also, opacity can be transitioned, display cannot.

Use the code below that suits your needs and add an ID or class(advanced tab) “hide-on-scroll” or “show-on-scroll” to any element in the header.

Code for opacity version:

/* HIDE ON SCROLL CLASS AND ID */
.she-header .hide-on-scroll .elementor-widget-container, .she-header #hide-on-scroll .elementor-widget-container {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

/* SHOW ON SCROLL CLASS AND ID */
.she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

/* FULL OPACITY */
.she-header .show-on-scroll .elementor-widget-container, .she-header #show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) .hide-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #hide-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container {
    opacity: 1 !important;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

Code for display none:

/* HIDE ON SCROLL CLASS AND ID */
.she-header .hide-on-scroll .elementor-widget-container, .she-header #hide-on-scroll .elementor-widget-container {
    display: none;
}

/* SHOW ON SCROLL CLASS AND ID */
.she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container {
    display: none;
}

Here is some optional extra code to style the “show-on-scroll” items to look like elementor hidden items:

/* HIDDEN ELEMENT STYLING */
.elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container {
    display: block !important;
    -webkit-filter: opacity(.4) saturate(0);
    filter: opacity(.4) saturate(0);
    border: 1px solid rgba(0,0,0,.02);
    background: -webkit-repeating-linear-gradient(
        325deg
        ,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 2px,transparent 9px);
            background-image: -webkit-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: -moz-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: -o-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: repeating-linear-gradient(
        125deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
}

.elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll:not(.elementor-element-overlay), .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll:not(.elementor-element-overlay) {
    display: block !important;
    border: 1px solid rgba(0,0,0,.02);
    background: -webkit-repeating-linear-gradient(
        325deg
        ,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 2px,transparent 9px);
            background-image: -webkit-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: -moz-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: -o-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
            background-image: repeating-linear-gradient(
        125deg
        , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
}

I hope this is what you needed. Let me know if I can do anything to help.