sticky sidebar widgets

[yari]

sample

css

@media screen and (max-width:1200px) {
  .affix, 
  .affix-bottom {
    display: none;
  }
}

.affix-top {
  position: relative;
}

.affix {
  top: 70px;
}

.affix  {
    width: 263px;
}

widget container

<div data-spy="affix" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{title}}</h3></div>
<div class="panel-body">{{body}}</div></div>

JS: /Custom JS tab

function renderWidgets() {
   $('[data-spy="affix"]').affix({
     offset: {
       top: 400,
       bottom: function () {
         return (this.bottom = $('.footer').outerHeight(true))
       }
    }
  });
}

if (window.jQuery) {
    renderWidgets();
    $(window).on('action:ajaxify.end', renderWidgets);
} 

demo: https://timuu.com/topic/4426/22-5-pbe-güncellemeleri

[teh_g]

@yari I like it! That would be a cool option to add into Core

[yari]

@teh_g I agree

[yari]

I updated to the latest version. It does not work

[baris]

@yari said in sticky sidebar widgets:

$(window).on('action:ajaxify.end', function () {
$('[data-spy="affix"]').affix({
offset: {
top: 400,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});

Where are you placing this? Inside the widget? or the customJS tab? You might have to change it to

function renderWidgets() {
$(window).on('action:ajaxify.end', function () { 
   $('[data-spy="affix"]').affix({
     offset: {
       top: 400,
       bottom: function () {
         return (this.bottom = $('.footer').outerHeight(true))
       }
     }
   });
 });
}

if (window.jQuery) {
    renderWidgets();
} else {
    window.addEventListener('load', renderWidgets);
}

[yari]

thanks. I added it to the CustomJs tab. problem solved.

[faizanzahid]

@fais3000 if they add this in core, it would be cool.