Jim R Posted August 31, 2019 Share Posted August 31, 2019 (edited) Here is the page in question: https://www.courtsideindiana.com/season-preview/19-20/sectional1920/?sectional=8 I don't have any -- overflow: hidden; -- issues, at least not from what I see when I inspect the element. I do my work in Safari, but I test a lot in Developer mode as well as a separate Chrome browser. CSS div.navigation { position: -webkit-sticky; position: sticky; top: 0px; background-color: red; padding: 10px; font-size: 20px; } PHP/HTML echo '<div class="navigation">Hello</div>'; Edited August 31, 2019 by Jim R Quote Link to comment Share on other sites More sharing options...
Jim R Posted August 31, 2019 Author Share Posted August 31, 2019 BTW...the DIV in question is in red, and I'm trying to get it to stick to the top of the browser as the User scrolls down. Quote Link to comment Share on other sites More sharing options...
Barand Posted August 31, 2019 Share Posted August 31, 2019 Does position: fixed; work? Quote Link to comment Share on other sites More sharing options...
Jim R Posted August 31, 2019 Author Share Posted August 31, 2019 28 minutes ago, Barand said: Does position: fixed; work? Not as intended, and I had tried that earlier. Sticky is supposed to keep the DIV relative until the "Top" is reached, then stick there. Maybe it's a theme issue too that I'm using for WordPress, as it hides behind the main navigation until that is off screen. I need it visible the whole time. I thought I was doing well to find the "main" issue that keeps "sticky" from working (overflow: hidden;), but I don't have that issue. Quote Link to comment Share on other sites More sharing options...
Jim R Posted August 31, 2019 Author Share Posted August 31, 2019 There was a light plugin via WordPress that took care of it. Not sure it "solves" the problem, but then again, it could be a WordPress/theme issue. As long as it works, I'm good. Quote Link to comment Share on other sites More sharing options...
NotSunfighter Posted October 23, 2019 Share Posted October 23, 2019 I know this is old, but for people coming and read this - position sticky works depending where the element is in the page hyrachy. To stick a div to the body coordinates That div MUST exist in the body and not in another div. so <body> <div class="navigation">Hello</div> will work, but <body> <header> <div class="navigation">Hello</div> will not. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.