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
$(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
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
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
The issue here is with height, but not the height you thought about. Let’s first start by the definition of the sticky position: A stickily positioned element is an element whose computed position value is sticky. It’s treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value … Read more
According to the MDN, fixed position elements are treated as relative position elements until the specified threshold is exceeded It’s all a matter of language here because the above sentence doesn’t mean the element will necesseraly start position:relative then become fixed. It says until the specified threshold is exceeded. So what if initially we have … 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
Since flex box elements default to stretch, all the elements are the same height, which can’t be scrolled against. Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it. Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other … Read more
Seems that this is a bug present in Android 4.4, got around it with the following: @Override public void onTaskRemoved(Intent rootIntent) { Intent restartService = new Intent(getApplicationContext(), this.getClass()); restartService.setPackage(getPackageName()); PendingIntent restartServicePI = PendingIntent.getService( getApplicationContext(), 1, restartService, PendingIntent.FLAG_ONE_SHOT); AlarmManager alarmService = (AlarmManager)getApplicationContext().getSystemService(Context.ALARM_SERVICE); alarmService.set(AlarmManager.ELAPSED_REALTIME, SystemClock.elapsedRealtime() +1000, restartServicePI); } Found this answer from this post
The issue is the use of overflow inside .app-body. It’s a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element. Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden … Read more