There’s not a quick or easy answer to this but with a bit of creative cajoling we can emulate the same functionality. What we need is a series of elements we can identify, loop over and then set up so that when we hit their position on the page the previous item is pushed up … Read more
Modern Clean CSS “Sticky Footer” from James Dean HTML <!DOCTYPE html> <head> <title></title> </head> <body> <nav></nav> <article>Lorem ipsum…</article> <footer></footer> </body> </html> CSS html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; } … Read more
I’m not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here’s a simple layout with fixed left side (Split 50 50). body, html { height: 100%; } #left { position: fixed; top: 0; bottom: 0; } To make … Read more
$(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
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
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
Here’s a start. Basically, we copy the header on load, and then check (using .scrollTop() or window.scrollY) to see when the user scrolls beyond a point (e.g. 200pixels). Then we simply toggle a class (in this case .down) which moves the original into view. Lastly all we need to do is apply a transition: top … Read more
You can not use animate() method with scroll function it will create conflict because scroll value will change always and jQuery can not infinite repeat same animation. Stop won’t rescue this issue either, or i cound’t manage to do it. And i suggest to use variation in if statements. Here is not working animate sample … Read more
Here I will explain how to do it without an external library. It will be a very long post, so brace yourself. First of all, let me acknowledge @tim.paetz whose post inspired me to set off to a journey of implementing my own sticky headers using ItemDecorations. I borrowed some parts of his code in … Read more
As @alex said a scrolling box is a box where the value of overflow is set to a value different from visible (the default one). I cannot confirm but I concluded this based on this previous answer where overflow is creating some issues with sticky element. As I explained there, if you have an element … Read more