CODEWITHSUNDEEP
htmlcss
Petro Chaikivskyi
Petro Chaikivskyi

Reputation: 401

Position fixed issue when scroll to top

Below is my HTML structure

@media only screen and (max-width: 767px) {
    .search-trigger {
        position: relative;
    }

    ._sticky.content-left {
        position: fixed;
        z-index: 1000;
        width: 100%;
        top: 0;
        background-color: #e9eef2;
    }

    ._sticky .search-trigger {
        display: inline-block;
        width: 80%;
    }

    ._sticky .search-trigger button {
        border-radius: 25px;
        height: 45px;
        font-size: 20px;
        padding-left: 20px;
        width: 100%;
        font-weight: 100;
        color: #c3c2c2;
        text-align: left;
        background-color: #fff;
    }

    ._sticky .logo {
        display: none;
    }

    ._sticky .nav-toggle {
        position: relative;
        display: inline-block;
        left: 0!important;
        right: 0!important;
        top: 0;
        vertical-align: middle;
        margin-left: 10px;
    }
}

.search-trigger {
    display: none;
    margin: 20px 0 20px 20px;
}
<div class="page-wrapper" style="display: inline;">
    <div class="header-pre-container" style="display: inline;">
        <header class="page-header" style="display: inline;">
            <div class="header content" style="display: inline;">
                <div class="content-left _sticky">
                    <div class="search-trigger" data-trigger="trigger">
                        <button><span>Text</span> </button>
                    </div>
                    <span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
                    <a class="logo" href="url" title="title">
                        <img class="logo-desktop" src="http://*.png" alt="Logo" width="225" height="45">
                    </a>
                    <div class="sections nav-sections">
                        Some content
                    </div>
                </div>
            </div>
        </header>
    </div>
</div>

On some mobile devices on Chrome browser sticky header (.content-left) does not work correctly, it disappears when I scroll to the top, but if I will use a sticky header for element, .header-pre-container, it works fine. So what is the reason for this strange behavior?

Found solutions in google do not work: No one parent element does not have the overflow or transform or float CSS style. display: inline - do not fix the issue -webkit-backface-visibility: hidden; - do not fix the issue -webkit-transform: translateZ(0) - do not fix the issue

Upvotes: 0

Views: 810

Answers (1)

kingpanda419
kingpanda419

Reputation: 141

._sticky.content-left {
        position: sticky;
        z-index: 1000;
        width: 100%;
        top: 0;
        background-color: #e9eef2;
    }

I am not sure that is work exactlly well, if you give me your code, I will fix it.

Upvotes: 0

Related Questions