After I add the height: auto; into body’s CSS attributes as below, this auto-hiding problem is fixed. body { background: #fff; color: #444; font-family: “Open Sans”, sans-serif; height: auto; } Hope it will be helpful to you. 🙂
I’ve taken jnns answer and updated it so that it is smooth between scrolls like sticky kit may have been. The only issue is that it required a magic number for a containing div s.t. the container maintains it’s size while the div is absolutely positioned – this might be solved in your code by … Read more
Sticky works that way, it will remain sticky relative to its parent. You need to use fixed. Check this codepen
Bootstrap 3 Here is a working left sidebar example: http://bootply.com/90936 (similar to the Bootstrap docs) The trick is using the affix component along with some CSS to position it: #sidebar.affix-top { position: static; margin-top:30px; width:228px; } #sidebar.affix { position: fixed; top:70px; width:228px; } EDIT– Another example with footer and affix-bottom Bootstrap 4 The Affix component … Read more
When the depth is sticky, you’ll will update with the same settings each time you update. If the depth isn’t sticky, next time you update you will revert back to the former setting, pottentially downloading everything recursively (that is maybe a lot of data). EDIT: It seems that “fully recursive” is currently broken. I need … Read more
You need to make all the elements to stick to the same container (containing block) by adding some offsets. Here is a basic example where the elements will stick to the body: body { margin:0; min-height:200vh; border:2px solid; } .first { height:50px; background:red; position:sticky; top:0; } .second { height:50px; background:blue; position:sticky; top:52px; } .third { … Read more
I faced the same problem. My workaround was to use the :after pseudo element to emulate a bottom border. th:after{ content:”; position:absolute; left: 0; bottom: 0; width:100%; border-bottom: 1px solid rgba(0,0,0,0.12); }
This Flexbox solution is neater and far easier to implement: HTML <body> <div class=”content”> content </div> <footer class=”footer”></footer> </body> CSS html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } .footer { flex-shrink: 0; } Just ensure you wrap the necessary divs inside the body.
$(document).ready(function() { $(window).scroll(function () { //if you hard code, then use console //.log to determine when you want the //nav bar to stick. console.log($(window).scrollTop()) if ($(window).scrollTop() > 280) { $(‘#nav_bar’).addClass(‘navbar-fixed’); } if ($(window).scrollTop() < 281) { $(‘#nav_bar’).removeClass(‘navbar-fixed’); } }); }); html, body { height: 4000px; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: … Read more
Position sticky was not working for me due to the body element having overflow-x: hidden; set.