You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.2 KiB
54 lines
2.2 KiB
(function ($) {
|
|
$.fn.stickySidebar = function (options) {
|
|
var config = $.extend({
|
|
headerSelector: 'header',
|
|
navSelector: '#menuWrapper',
|
|
contentSelector: '#left',
|
|
footerSelector: '#footer',
|
|
sidebarTopMargin: 25,
|
|
footerThreshold: 100
|
|
}, options);
|
|
|
|
var fixSidebr = function () {
|
|
var sidebarSelector = $(this);
|
|
var viewportHeight = $(window).height();
|
|
var viewportWidth = $(window).width();
|
|
var documentHeight = $(document).height();
|
|
var headerHeight = $(config.headerSelector).outerHeight();
|
|
var navHeight = $(config.navSelector).outerHeight();
|
|
var sidebarHeight = sidebarSelector.outerHeight();
|
|
var contentHeight = $(config.contentSelector).outerHeight();
|
|
var footerHeight = $(config.footerSelector).outerHeight();
|
|
var scroll_top = $(window).scrollTop();
|
|
var fixPosition = contentHeight - sidebarHeight;
|
|
//var breakingPoint1 = headerHeight
|
|
var breakingPoint1 = headerHeight + navHeight;
|
|
var breakingPoint2 = documentHeight - (sidebarHeight + footerHeight + config.footerThreshold);
|
|
|
|
// calculate
|
|
if ((contentHeight > sidebarHeight) && (viewportHeight > sidebarHeight)) {
|
|
if (scroll_top < breakingPoint1) {
|
|
sidebarSelector.removeClass('sticky');
|
|
} else if ((scroll_top >= breakingPoint1) && (scroll_top < breakingPoint2)) {
|
|
sidebarSelector.addClass('sticky').css('top', config.sidebarTopMargin);
|
|
} else {
|
|
var negative = breakingPoint2 - scroll_top;
|
|
sidebarSelector.addClass('sticky').css('top', negative);
|
|
}
|
|
}
|
|
};
|
|
|
|
return this.each(function () {
|
|
$(window).on('scroll', $.proxy(fixSidebr, this));
|
|
$(window).on('resize', $.proxy(fixSidebr, this))
|
|
$.proxy(fixSidebr, this)();
|
|
});
|
|
};
|
|
}(jQuery));
|
|
|
|
$(document).ready(function () {
|
|
$('#sidebar').stickySidebar({
|
|
//sidebarTopMargin: 70,
|
|
//footerThreshold: 100
|
|
});
|
|
});
|