Should Stickybits provide the ability to automatically stick elements to the bottom of the viewport? about stickybits HOT 9 CLOSED

Based on @kvanberendonck thoughtful notes:

Should stickbits support bottom sticky positioning out-of-the-box? (Or just provide an example as it does currently)

• 👍 this comment if you want out-of-the-box support

from stickybits.

Could I view the web page you're working on? ...Or Codepen where I can view the issue?

I have a working example in the readme where the Stickybits elements stick to the bottom last time I checked. Perhaps we can start there ...?

from stickybits.

Now I can't get verticalPosition: 'bottom' to work on any of my browsers, here's a plunkr:

http://plnkr.co/edit/5ZFoD1US3Uwmm391lXZy?p=preview

The two divs are being called with respectively

Object { useStickyClasses: true, stickyBitStickyOffset: 20 }  sticky.directive.ts!transpiled:42:21
Object { useStickyClasses: true, stickyBitStickyOffset: 20, verticalPosition: "bottom", customVerticalPosition: true }

from stickybits.

@yowainwright there's a big block of code in the bottom sticky example in the README that seems to be doing all the magic in the example:

// setup bottom sticky
var browserWindowHeight = window.innerHeight;
var children = document.querySelectorAll('.child');
for (var i = 0; i < children.length; i += 1) {
  var child = children[i];
  var childHeight = child.offsetHeight;
  var childPosition = browserWindowHeight - childHeight;
  console.log(browserWindowHeight, child, childHeight, childPosition);
  child.style.top = childPosition + 'px';
}

When I remove it, the bottom stickys stop working, so, I guess bottom isn't actually supported right now? Any chance this code could be integrated into the library?

There are very few/no libraries that currently have full support for bottom that works .. bottom support was the main reason I chose this one 🚀

from stickybits.

Thanks for your feedback @kvanberendonck.

I apologize for the mistake in the readme. Your comment reads like it would have saved you time if I didn't have the mistake in the examples (which suggested a feature that was just an example I added).

I was/am happy to provide the examples or assistance for how to set the sticky element to bottom but I don't plan on adding it to the Stickybits API.

I'm happy to help in general b/c I love problem solving and code!

The reason for this is that the extra code to support the bottom feature (from my observation) would take away from Stickybits core functionality:

1. make things sticky in a way the covers most use cases
2. support the use of sticky classes for css fun.

If you'd like to submit a pr that work in IE9 and other web browsers, I'd like to check it out!

For anyone using position: sticky I would generally ask: can sticky elements be static on less modern browsers? My hope is that often position: sticky or position: fixed is enough = no JS.

Stickybits is minimal to address use cases that I've seen dealt with regularly. My hope is that is performant, small (file size) so that its developer customers don't have to worry much about it in regards to bigger choices like frameworks, libraries, build pipelines, tests.

from stickybits.

Ah unfortunately position fixed is not enough in my use case, I need the floater to responsively inherit the width of its container but 'width: inherit;' doesn't work. :(

Eventually there will be 2 sidebyside floaters (imagine split view) so I may have to veer towards using a full JS polyfill.

from stickybits.

I think/hope that can be addressed with css @kvanberendonck. There are more options than what has been commented on in the fixed width issue. I am hoping to make an example for some of the use cases I'm aware of in the nearer future.

Thanks for your insights no matter what.

from stickybits.

The css solution is clever, thanks for that.

from stickybits.

Going by the pattern of philosophy, this isn't a polyfill and doesn't need to do this.

Has been working fine with css solution.

from stickybits.