Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Small jQuery plugin dilemma

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #180779
    nixnerd
    Participant

    But how do you know how much padding?

    #180781
    Alen
    Participant

    By getting the height of the menu.

    #180782
    nixnerd
    Participant

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

    #180783
    Alen
    Participant

    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.

    #180784
    Senff
    Participant

    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?

    #180787
    nixnerd
    Participant

    That’s what I’m confused about.

    #180788
    Alen
    Participant
    
    .nav {  /* original styles */}
    .nav.is-fixed { /* alternative styles */ }
    
    #180790
    Senff
    Participant

    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.

    #180792
    Alen
    Participant

    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 */ }
    
    #180793
    nixnerd
    Participant

    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.

    #180794
    Senff
    Participant

    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.

    #180795
    Alen
    Participant

    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)

    #180796
    Alen
    Participant

    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.

    #180798
    nixnerd
    Participant

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

    #180802
    Senff
    Participant

    Feel free to share NIX :)

Viewing 15 posts - 16 through 30 (of 31 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.