Position sticky not working with body{ overflow-x: hidden; }
As far as I know, you cannot use it by now.
It is still only partially supported in some browsers.
When you want to know how far it is with this feature, I can advise you to check it on caniuse.com.
Sticky Feature: https://caniuse.com/#feat=css-sticky
CSS position: sticky and overflow
It's important to understand that sticky
elements are first treated like a relative
element and then a fixed
element (see MDN). Therefore, you must first look at it like a relative element. If you give a height of 100% to a relative element, then nothing really happens unless its parent element has a defined height.
If you want your sticky element to have a scrollbar too, you must give it a meaningful height. I suggest using viewport height:
.child {
position: sticky;
top: 0;
bottom: 0;
height: 50vh;
overflow-y: auto;
}
For the record - the "stickiness" doesn't appear to be working as expected in either FF or Safari in terms of the element becoming fixed
during scrolling. I'm not concerning myself with that - just focusing on the overflow issue.
Why position sticky is not working in my code?
Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is hidden.
{!categorySearch && (
<div className="max-w-2xl mx-auto z-40 relative font-metropolis_semibold">
<div className="sticky top-0">
<div className=" z-40 bg-white w-full transition-all">
<div
id="logo"
className={
logo
? "px-md mt-10 font-medium"
: "px-md mt-10 font-medium animate"
}
>
<div className="overflow-x-hidden ">
<img
src={settings.logo_intro_image_url}
alt={settings.name}
className="max-w-full object-contain company-logo"
style={{ height: settings.logo_height }}
id="company-logo"
/>
</div>
</div>
<div
className={`${
logo
? "shadow-none border-none"
: "border-b-2 border-gray-200"
}`}
>
<TopOptions
showOption={showOption}
setShowOption={setShowOption}
addBorder={logo}
outlets={outlets}
languageLabels={languageLabels}
settings={selectedOutlet.settings}
/>
</div>
</div>
{Object.keys(bannerArray).length === 1 ? (
<div className="w-full px-md border-b-8 border-banner pb-md">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<>
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
</>
);
})}
</div>
) : (
<div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
);
})}
</div>
)}
<div className="flex flex-row justify-between items-center px-md my-25p">
<p className="font-metropolis_regular text-sm break-words">
{languageLabels.like_to_order}
</p>
<img
src={Search}
alt="search"
onClick={() => setCategorySearch(true)}
/>
</div>
<div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
{categoryList.map((category) => {
// console.log(category);
return (
<Dishes
key={category.category_id}
category={category}
languageLabels={languageLabels}
loading={loadingCategories}
/>
);
})}
</div>
<BottomNavigation
languageLabels={languageLabels}
isLoyalty={settings.enable_reward_points_functionality}
/>
</div>
</div>
)}
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Creating a site wrapper div inside the <body>
and applying the overflow-x:hidden
to the wrapper instead of the <body>
or <html>
fixed the issue.
It appears that browsers that parse the <meta name="viewport">
tag simply ignore overflow
attributes on the html
and body
tags.
Note: You may also need to add position: relative
to the wrapper div.
Related Topics
Webgl - Wait for Texture to Load
Number Input - Always Show Spin Buttons
Always Show Vertical Scrollbar in <Select>
CSS/HTML: Create a Glowing Border Around an Input Field
CSS: Outline-Offset Alternative for Ie
How to Stop <Div> Tags Interfering with Counters
Why Does .Class:Last-Of-Type Not Work as I Expect
Poor Anti-Aliasing of Text Drawn on Canvas
Text Floating in Block Next to Image
Dashed Border Not Showing in Firefox
Bootstrap 4: Center Inline Form Inside a Jumbotron
Random Querystring to Avoid Ie Caching
Adding Custom Fonts to Github Pages
CSS Border on Png Image with Transparent Parts
How to Implement Responsive Web Design and Its Best Practices