Home › Forums › JavaScript › Small jQuery plugin dilemma
- This topic is empty.
-
AuthorPosts
-
August 26, 2014 at 4:05 pm #180779
nixnerd
ParticipantBut how do you know how much padding?
August 26, 2014 at 4:06 pm #180781Alen
ParticipantBy getting the height of the menu.
August 26, 2014 at 4:08 pm #180782nixnerd
ParticipantWhat if it’s set via ID? Can you arbitrarily query the height of any ol’ element? If so, that would work.
August 26, 2014 at 4:13 pm #180783Alen
ParticipantDoesn’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.
August 26, 2014 at 4:14 pm #180784Senff
ParticipantHow 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?
August 26, 2014 at 4:27 pm #180787nixnerd
ParticipantThat’s what I’m confused about.
August 26, 2014 at 4:40 pm #180788Alen
Participant.nav { /* original styles */} .nav.is-fixed { /* alternative styles */ }
August 26, 2014 at 4:44 pm #180790Senff
ParticipantThat’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.
August 26, 2014 at 4:46 pm #180792Alen
ParticipantThe 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 */ }
August 26, 2014 at 4:47 pm #180793nixnerd
ParticipantTo 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.
August 26, 2014 at 4:49 pm #180794Senff
ParticipantThe 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.
August 26, 2014 at 4:51 pm #180795Alen
ParticipantI 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)August 26, 2014 at 4:54 pm #180796Alen
ParticipantYou 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.
August 26, 2014 at 5:42 pm #180798nixnerd
ParticipantI can’t wait to see all this on my comp. I do “sticky” headers way different.
August 26, 2014 at 6:10 pm #180802Senff
ParticipantFeel free to share NIX :)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.