Make widget sticky

  • Hello,


    is it somehow possible to make a widget sticky using UIKit?


    I tried to do that on a widget, that is located on the sidebar position. I added a class like sticky-widget to the widget and added this to my scripts.


    Code
    1. $(document).ready(function(){
    2.   var navbar = $(".sticky-widget");
    3.   var sticky = UIkit.sticky(navbar, { boundary: true });
    4. });


    But now the box sticks to the top and fills the full width. Can I get it to stay on the sidebar-"row"?

  • Hi Tobbe ,


    I added a sidebar to the avanti theme (https://demo.pagekit.com/theme-avanti).


    So this is my source:




    This is the widget:


    Code
    1. <div class="uk-panel uk-panel-box sticky-widget ">
    2. Test
    3. </div>
  • Important info: You changed theme Avanti.


    Theme Avanti has some Theme specific code that gives the sticky placeholder an absolute position. This ignores the boundary. You need to restrict the selector so that it will be applied to the main menu only. Original selector:


    CSS
    1. .uk-sticky-placeholder {
    2. position: absolute;
    3. top: 0;
    4. left: 0;
    5. right: 0;
    6. z-index: 4;
    7. }
  • Using aside .uk-sticky-placeholder as identifier should have higher priority than only using .uk-sticky-placeholder. So you need to define the attributes you want to override in your own style definition. It should be possible to add this under admin/site/settings, section Code.

  • Okay. As I am very (very, very) bad with CSS, I resume what I have to do:


    Add


    Code
    1. aside .uk-sticky-placeholder {
    2.     position: absolute;
    3.     top: 0;
    4.     left: 0;
    5.     right: 0;
    6.     z-index: 4;
    7. }


    to my styles and change the values (top, left, right) to the values I want to, right?

  • Okay, that's pretty cool.


    It works fine, but there has been a little space between the widgets before:


    Before:




    After:





    And before, longer strings have been wrapped like this:




    But now the box just resizes:




    So maybe there's a quick fix? But I don't expect you to do all my work for free. As I am (as I said) pretty bad with CSS, I would spend you a beer or a coke ;)

  • Regarding the changed length: I don't know. In my try it works.


    Regarding the space: Try to set top to a different value, e.g. 40px would be the easiest.


    And then: use the Browser console and try what you can change. This is the best way to learn :)

  • Alright, I solved the problem with the space between the elements.


    Now there is one last thing. If I scroll up, the element sticks to the top. But: It's getting wider in this moment:





    And: Is it possible to define a top-margin for the element when it is sticky? It should not overlay the nav bar.


    Edit:


    The space to the top can be configured like that:


    Code
    1. UIkit.sticky(navbar, { boundary: true, top:150 });
  • The element gets wider because it gets a new position (fixed) and then needs a width. Maybe you can play around with getWidthFrom and set it to another element that already has the desired width? For example by giving an id to the "red" element.

  • You're right, but for avanti you can set a HTML class for the widget. If it is only one homepage where you need this, it might be suitable to accee it with a special designed class. Othweise you might be able to use an already existing class from the red widget.

  • Alright, I solved that problem now.


    I added another class to the red widget.


    After doing this I changed my JS to:


    Code
    1.   var sticky = UIkit.sticky(navbar, { boundary: true, top:150, getWidthFrom:'topic-nav',media:640});


    Now I have just 2 more things to solve:



    • Do not apply the CSS on mobile devices (at the moment the box is right in the middle of the content if I look at the site with my phone)
    • The widget should have exactly the same size as the red widget when it's not sticky. At the moment I'm doing it this way:


    Code
    1. aside .uk-sticky-placeholder {
    2.     position: relative;
    3.     top: 550px;
    4.     left: auto;
    5.     right: auto;
    6. width: 250px;
    7.     z-index: 10;
    8. }


    This works on my mac, but not on my phone. There you can see, that the widget is not that wide as the red one.

  • Okay - makes sense.


    I changed it to a class selector - still works ;)

    I looked at the CSS and found this:


    Code
    1. .uk-grid-width-1-4 > * {
    2.     width: 25>#/p###
    3. }




    If I do


    Code
    1. aside .uk-sticky-placeholder {
    2.     position: relative;
    3.     top: 550px;
    4.     left: auto;
    5.     right: auto;
    6.     width: 25%;
    7.     z-index: 10;
    8. }


    it is still too wide.


    I can change to 20% and it seems to work, but it should be 25% or am I wrong?


    The red widget is


    Code
    1. <aside class="uk-width-medium-1-4" style="min-height: 1900px;">
    2.     <div class="uk-panel uk-panel-box uk-panel-box-primary  topic-nav">
    3.           ...
    4.           ... 
    5.     </div>
    6. </aside>