Search the Community
Showing results for tags 'htms'.
Found 1 result
-
I have a sticky navbar which works fine until I add an image to my image box which at that point the sticky doesn't kick in until you scroll past the image. Any ideas as to what could be the cause of this it's driving me crazy? At least it's a short trip for me! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px; font-family: Arial, Helvetica, sans-serif; } .header { background-color: #f1f1f1; padding: 30px; text-align: center; } #navbar { overflow: hidden; background-color: #333; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background-color: #4CAF50; color: white; } .content { padding: 16px; min-height: 1000px; } .sticky { position: fixed; top: 0; width: 100%; } .sticky + .content { padding-top: 60px; } .imagebox{ position: relative; width: 100%; height: auto; padding: 0px auto; margin: 0px auto; } .loginbox{ position: absolute; float: right; top: 25px; right: 25px; width: 200px; height: 200px; padding: 15px; background-color: rgba(0, 0, 0, 0.25); } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id="navbar"> <a class="active" href="javascript:void(0)">Home</a> <a href="javascript:void(0)">News</a> <a href="javascript:void(0)">Contact</a> </div> <div class="imagebox"> <div class="loginbox "></div> </div> <div class="content"> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script> </body> </html>
