Here is the code in my file:
//console.log('strx-floating-sidebar/js/main.js loaded ok');
strx = {};
if (typeof console === 'undefined') {
console = {
log: function () {},
dir: function () {}
};
}
(function () {
strx.start = function (opts) {
jQuery(function () {
opts = jQuery.extend({}, {
content: '#content',
sidebar: '#sidebar',
wait: 3000,
debounce: 500,
animate: 3000,
debug: 0
}, opts);
setTimeout(function(){
var $w = jQuery(window),
$c = jQuery(opts.content),
$ss = jQuery(opts.sidebar),
$b = jQuery('body');
if ($c.length && $ss.length) {
$ss.each(function () {
(function ($s) {
// console.log($c.height() - $s.height());
if ( $c.height() - $s.height() > opts.minHDiff || opts.dynamicTop) {
$s.parent().css('position', 'relative');
var initialSPos=$s.position(),
initialSOff=$s.offset();
//Recupero Top e Left iniziali di tutte le sidebar prima di iniziare il posizionamento
setTimeout(function(){
if ( $c.height() > $s.height()) {
$s.css({
position: 'absolute',
left: initialSPos.left + 'px',
top: initialSPos.top + 'px'
}).find('.widget').css('position', 'relative');
}
else {
$s.css({
position: 'relative',
left: 0 + 'px',
top: 0 + 'px'
}).find('.widget').css('position', 'relative');
}
var lastWidth = $(window).width();
var lastScrollY = -1,
sidebarTop = initialSPos.top,
offsetTop = initialSOff.top - sidebarTop,
maxTop = sidebarTop + $c.height() - $s.outerHeight(),
onScroll = function (e) {
if ($s.height() > $c.height()) {
$ss.css({
position: 'relative',
left: 0 + 'px',
top : 0 + 'px'
}).find('.widget').css('position', 'relative');
return;
}
if ($(window).width()!=lastWidth) {
if ($(window).width() > 940) {
sidebarTop = 60;
$s.css({
position: 'absolute',
left: 690 + 'px',
top: sidebarTop + 'px'
}).find('.widget').css('position', 'relative');
lastScrollY = -1;
}
lastWidth = $(window).width();
}
var scrollY = $w.scrollTop(),
t, scrollingDown = scrollY > lastScrollY;
if ((scrollingDown && scrollY > sidebarTop + offsetTop && scrollY + $w.height() > $s.position().top + $s.height() + offsetTop - sidebarTop) || (!scrollingDown && scrollY < $s.position().top + offsetTop)) {
if (e.type === 'scroll' && ($w.height() > $s.height() || !scrollingDown)) {
//Scorrimento verso l'alto
t = Math.max(sidebarTop, scrollY - (offsetTop) + (~~opts.offsetTop));
} else {
//Scorrimento verso il basso o resize
t = Math.max(sidebarTop, scrollY + $w.height() - $s.outerHeight() - offsetTop - (~~opts.offsetBottom));
}
t = Math.min(t, opts.dynamicTop ? (sidebarTop + $c.height() - $s.outerHeight()) : maxTop);
$s.stop().animate({
top: t + 'px'
}, ~~opts.animate);
/*if (opts.debug) {
window.scrollY = scrollY;
console.log('top=' + t + ', scrollY=' + scrollY);
}*/
}
lastScrollY = scrollY;
};
if (opts.debounce && Function.prototype.debounce) {
onScroll = onScroll.debounce(opts.debounce);
}
$w.scroll(onScroll).resize(onScroll);
onScroll({
type: 'scroll'
});
$w.scroll(function(){
$s.stop();
});
},0);
}
})(jQuery(this));
});
}
else {
if ($c.length === 0) {
console.log(opts.content + ' not found');
}
if ($ss.length === 0) {
console.log(opts.sidebar + ' not found');
}
}
}, opts.wait);
});
};
})();
I don't use this plugin anymore, but it worked pretty well last time I checked. It was completely responsive. I think you need to check the option dynamicTop in its settings menu.
Also, you may need to change some values in this code. 940 is the width of my content + sidebar, 60 is the height at which my sidebar started, and 690 is the width at which it started.
I'm not sure, but I think you will also need the CSS above. Good luck!