Small jQuery plugin dilemma

[nixnerd]

But how do you know how much padding?

[Alen]

By getting the height of the menu.

[nixnerd]

What if it’s set via ID? Can you arbitrarily query the height of any ol’ element? If so, that would work.

[Alen]

Doesn’t matter if it’s ID or class. We’re not cloning anything, so whatever element we’re working on, that’s the element we’re applying the functionality to. Presentation should be left to the CSS.

[Senff]

How do you know how much padding you’d need? And what if the element is floated left? Or right? What if it isn’t full width?

[nixnerd]

That’s what I’m confused about.

[Alen]

.nav {  /* original styles */}
.nav.is-fixed { /* alternative styles */ }

[Senff]

That’s what I’m confused about.

Well, my plugin doesn’t care if the element is floated, or full-width, or whatever. It works for “any” type of element. That’s why I clone it — so that ALL properties of the original element are retained, and the sticky item will look like it’s the original one.

@Alen I think you’re kind of missing the point of the plugin. It’s coded in such a way that you can use on any element in your page (without having to add new or alternative styles).
If the element is not a (full-width) menu, then you’ll need a lot more than just some vertical padding to make sure the rest of the page doesn’t act funky once the element gets sticky.

See the pen in the original post.

[Alen]

The plugin gets the position of current element, once the scroll is at the same position it makes that element fixed, taking it out of flow. So it doesn’t matter if element is floated or whatever, you’re essentially restyling it.

so that ALL properties of the original element are retained

.nav {  /* original styles */}

the sticky item will look like it’s the original one

.nav.is-fixed { /* alternative styles */ }

[nixnerd]

To be clear I wasn’t confused about floats… rather, how much padding and how to determine that. Admittedly, haven’t looked at Codepens. On mobile.

[Senff]

The plugin gets the position of current element, once the scroll is at the same position it makes that element fixed, taking it out of flow. So it doesn’t matter if element is floated or whatever, you’re essentially restyling it.

But that’s the point. Since you’re taking it out of the flow, the rest of the page will act on that. And that’s exactly what can’t happen — the element should just stick, and nothing else on the page should change or react. The only safe way to do that is to not take it out of the flow.

To be clear I wasn’t confused about floats… rather, how much padding and how to determine that.

No need to determine anything — the cloning method just takes care of that. :) But like I said, just padding is not enough.

[Alen]

I think you’re kind of missing the point of the original question.

I’m not missing anything.

Instead of just using CSS, you’re cloning DOM elements, reading styles, setting styles, all with JavaScript.

I can style each element independently.

// JavaScript
$('.my-cool-pic').stickIt();

// CSS
.my-cool-pic {}
.my-cool-pic.is-fixed {}

The whole point of the plugin is to make something fixed. This way you get both alternatives controlled via CSS.

In my mind:

JavaScript (Interactivity)
CSS (Presentation)

[Alen]

You can modify the code to fit whatever you need and set things dynamically. I just don’t see the point of doing everything with JavaScript. In addition as a web author I want to be able to style my page and not deal with inline styles added by JavaScript.

[nixnerd]

I can’t wait to see all this on my comp. I do “sticky” headers way different.

[Senff]

Feel free to share NIX :)

[Author]

Posts