Home › Forums › JavaScript › Small jQuery plugin dilemma
- This topic is empty.
-
AuthorPosts
-
August 26, 2014 at 4:05 pm #180779nixnerdParticipant
But how do you know how much padding?
August 26, 2014 at 4:06 pm #180781AlenParticipantBy getting the height of the menu.
August 26, 2014 at 4:08 pm #180782nixnerdParticipantWhat 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 #180783AlenParticipantDoesn’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 #180784SenffParticipantHow 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 #180787nixnerdParticipantThat’s what I’m confused about.
August 26, 2014 at 4:40 pm #180788AlenParticipant.nav { /* original styles */} .nav.is-fixed { /* alternative styles */ }
August 26, 2014 at 4:44 pm #180790SenffParticipantThat’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 #180792AlenParticipantThe 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 #180793nixnerdParticipantTo 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 #180794SenffParticipantThe 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 #180795AlenParticipantI 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 #180796AlenParticipantYou 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 #180798nixnerdParticipantI can’t wait to see all this on my comp. I do “sticky” headers way different.
August 26, 2014 at 6:10 pm #180802SenffParticipantFeel free to share NIX :)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.