Cara Membuat Sticky Sidebar Pada Blog
Cara Membuat Sticky Sidebar Pada Blog - sticky sidebar atau sidebar yang melayang dan menggantung dengan posisi relatif terhadap scroll yang bertujuan agar wiget yang dipsang dapat terus terlihat oleh visitor walaupun sudah di scroll ke bawah.
Bisanya pada bagian melayang akan dipasang widget ads(iklan) agar dapat mencuri perhatian dan memfokuskan pandangan visitor ke iklan yang dipasang, dengan tujan menarik pengunjung ke iklan yang tampil.
Sebenarnya ada beberapa cara membuat sidebar menjadi sticky, bisa hanya dengan megarahkan pada widgetnya saja yang dibuat sticky atau langsung secara keseluruhan satu baris sidebarya. Jadi semua widget akan langsung menjadi sticky.
Pada tutorial kali ini yang akan saya tulis yaitu membuat sticky sidebar-wrapper nya dan juga pada post-wrapper secara scroll down maupun scroll up. sehingga widget akan memiliki posisi fixed terhadap bagian lain yang lebih *panjang :d (dalam artian scrollnya) kebawah.
Sehingga jika id #post-wrapper lebih panjang kebawah dari pada id #sidebar-wrapper maka #sidebar-wrapper yang akan mengalami sticky namun jika id #post-wrapper lebih pendek dari id #sidebar-wrapper maka #post-wrapper yang akan mengalami sticky.
Bisa kalian cek dulu pada template blog kalian apakah terdapat code css #post-wrapper dan #sidebar-wrapper dan pada tag div id nya apakah ada code <div id='post-wrapper' dan <div id='sidebar-wrapper' jika tidak terdapat kode ini maka kalian harus sesuaikan sendiri nanti kode id atau class yang mengarak ke 2 possisi seperti di bawah ini contohnya :d .
Dengan menambhkan jquery tambahan maka sidebar blog akan menjadi sticky nama script jquerynya yaitu Theia Sticky Sidebar. saya menemukan script ini di beberapa template yang saya oprek, namun setelah menari refrensi ternyata ada dan sudah banyak sekali yang menulis tutorial ini di internet. seperti di blog, youtube, github, dll.
Berikut Cara Membuat Sticky Sidebar Blog
- Pertama pastikan dulu ada script jquery versi berapapun pada blog kalian contohnya ceperti dibawah. jika belum ada tambahkan script dibawah ke atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' />- Kemudian kalian pasangkan script Theia Sticky Sidebar dibawah ini ke atas </body>
<script>
//<![CDATA[
// Theia Sticky Sidebar 1.7.0
(function ($) {$.fn.theiaStickySidebar = function (options) {var defaults = {'containerSelector': '','additionalMarginTop': 0,'additionalMarginBottom': 0,'updateSidebarHeight': true,'minWidth': 0,'disableOnResponsiveLayouts': true,'sidebarBehavior': 'modern','defaultPosition': 'relative','namespace': 'TSS'};options = $.extend(defaults, options);options.additionalMarginTop = parseInt(options.additionalMarginTop) || 0;options.additionalMarginBottom = parseInt(options.additionalMarginBottom) || 0;tryInitOrHookIntoEvents(options, this);function tryInitOrHookIntoEvents(options, $that) {var success = tryInit(options, $that);if (!success) {console.log('TSS: Body width smaller than options.minWidth. Init is delayed.');$(document).on('scroll.' + options.namespace, function (options, $that) {return function (evt) {var success = tryInit(options, $that);if (success) {$(this).unbind(evt);}};}(options, $that));$(window).on('resize.' + options.namespace, function (options, $that) {return function (evt) {var success = tryInit(options, $that);if (success) {$(this).unbind(evt);}};}(options, $that))}}function tryInit(options, $that) {if (options.initialized === true) {return true;}if ($('body').width() < options.minWidth) {return false;}init(options, $that);return true;}function init(options, $that) {options.initialized = true;var existingStylesheet = $('#theia-sticky-sidebar-stylesheet-' + options.namespace);if (existingStylesheet.length === 0) {$('head').append($('<style id="theia-sticky-sidebar-stylesheet-' + options.namespace + '">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));}$that.each(function () {var o = {};o.sidebar = $(this);o.options = options || {};o.container = $(o.options.containerSelector);if (o.container.length == 0) {o.container = o.sidebar.parent();}o.sidebar.parents().css('-webkit-transform', 'none');o.sidebar.css({'position': o.options.defaultPosition,'overflow': 'visible','-webkit-box-sizing': 'border-box','-moz-box-sizing': 'border-box','box-sizing': 'border-box'});o.stickySidebar = o.sidebar.find('.theiaStickySidebar');if (o.stickySidebar.length == 0) {var javaScriptMIMETypes = /(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;o.sidebar.find('script').filter(function (index, script) {return script.type.length === 0 || script.type.match(javaScriptMIMETypes);}).remove();o.stickySidebar = $('<div>').addClass('theiaStickySidebar').append(o.sidebar.children());o.sidebar.append(o.stickySidebar);}o.marginBottom = parseInt(o.sidebar.css('margin-bottom'));o.paddingTop = parseInt(o.sidebar.css('padding-top'));o.paddingBottom = parseInt(o.sidebar.css('padding-bottom'));var collapsedTopHeight = o.stickySidebar.offset().top;var collapsedBottomHeight = o.stickySidebar.outerHeight();o.stickySidebar.css('padding-top', 1);o.stickySidebar.css('padding-bottom', 1);collapsedTopHeight -= o.stickySidebar.offset().top;collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight;if (collapsedTopHeight == 0) {o.stickySidebar.css('padding-top', 0);o.stickySidebarPaddingTop = 0;}else {o.stickySidebarPaddingTop = 1;}if (collapsedBottomHeight == 0) {o.stickySidebar.css('padding-bottom', 0);o.stickySidebarPaddingBottom = 0;}else {o.stickySidebarPaddingBottom = 1;}o.previousScrollTop = null;o.fixedScrollTop = 0;resetSidebar();o.onScroll = function(o) {if (!o.stickySidebar.is(":visible")) {return;}if ($('body').width() < o.options.minWidth) {resetSidebar();return;}if (o.options.disableOnResponsiveLayouts) {var sidebarWidth = o.sidebar.outerWidth(o.sidebar.css('float') == 'none');if (sidebarWidth + 50 > o.container.width()) {resetSidebar();return;}}var scrollTop = $(document).scrollTop();var position = 'static';if (scrollTop >= o.sidebar.offset().top + (o.paddingTop - o.options.additionalMarginTop)) {var offsetTop = o.paddingTop + options.additionalMarginTop;var offsetBottom = o.paddingBottom + o.marginBottom + options.additionalMarginBottom;var containerTop = o.sidebar.offset().top;var containerBottom = o.sidebar.offset().top + getClearedHeight(o.container);var windowOffsetTop = 0 + options.additionalMarginTop;var windowOffsetBottom;var sidebarSmallerThanWindow = (o.stickySidebar.outerHeight() + offsetTop + offsetBottom) < $(window).height();if (sidebarSmallerThanWindow) {windowOffsetBottom = windowOffsetTop + o.stickySidebar.outerHeight();}else {windowOffsetBottom = $(window).height() - o.marginBottom - o.paddingBottom - options.additionalMarginBottom;}var staticLimitTop = containerTop - scrollTop + o.paddingTop;var staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom;var top = o.stickySidebar.offset().top - scrollTop;var scrollTopDiff = o.previousScrollTop - scrollTop;if (o.stickySidebar.css('position') == 'fixed') {if (o.options.sidebarBehavior == 'modern') {top += scrollTopDiff;}}if (o.options.sidebarBehavior == 'stick-to-top') {top = options.additionalMarginTop;}if (o.options.sidebarBehavior == 'stick-to-bottom') {top = windowOffsetBottom - o.stickySidebar.outerHeight();}if (scrollTopDiff > 0) {top = Math.min(top, windowOffsetTop);}else {top = Math.max(top, windowOffsetBottom - o.stickySidebar.outerHeight());}top = Math.max(top, staticLimitTop);top = Math.min(top, staticLimitBottom - o.stickySidebar.outerHeight());var sidebarSameHeightAsContainer = o.container.height() == o.stickySidebar.outerHeight();if (!sidebarSameHeightAsContainer && top == windowOffsetTop) {position = 'fixed';}else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.outerHeight()) {position = 'fixed';}else if (scrollTop + top - o.sidebar.offset().top - o.paddingTop <= options.additionalMarginTop) {position = 'static';}else {position = 'absolute';}}if (position == 'fixed') {var scrollLeft = $(document).scrollLeft();o.stickySidebar.css({'position': 'fixed','width': getWidthForObject(o.stickySidebar) + 'px','transform': 'translateY(' + top + 'px)','left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left')) - scrollLeft) + 'px','top': '0px'});}else if (position == 'absolute') {var css = {};if (o.stickySidebar.css('position') != 'absolute') {css.position = 'absolute';css.transform = 'translateY(' + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)';css.top = '0px';}css.width = getWidthForObject(o.stickySidebar) + 'px';css.left = '';o.stickySidebar.css(css);}else if (position == 'static') {resetSidebar();}if (position != 'static') {if (o.options.updateSidebarHeight == true) {o.sidebar.css({'min-height': o.stickySidebar.outerHeight() + o.stickySidebar.offset().top - o.sidebar.offset().top + o.paddingBottom});}}o.previousScrollTop = scrollTop;};o.onScroll(o);$(document).on('scroll.' + o.options.namespace, function(o){return function () {o.onScroll(o);};}(o));$(window).on('resize.' + o.options.namespace, function(o){return function () {o.stickySidebar.css({'position': 'static'});o.onScroll(o);};}(o));if (typeof ResizeSensor !== 'undefined') {new ResizeSensor(o.stickySidebar[0], function(o){return function () {o.onScroll(o);};}(o));}function resetSidebar() {o.fixedScrollTop = 0;o.sidebar.css({'min-height': '1px'});o.stickySidebar.css({'position': 'static','width': '','transform': 'none'});}function getClearedHeight(e) {var height = e.height();e.children().each(function () {height = Math.max(height, $(this).height());});return height;}});}function getWidthForObject(object) {var width;try {width = object[0].getBoundingClientRect().width;}catch (err) {}if (typeof width === "undefined") {width = object.width();}return width;}return this;}})(jQuery);
$(document).ready(function() {
if ($(window).width() > 1120) {
$("#post-wrapper,#sidebar-wrapper").theiaStickySidebar({
additionalMarginTop: 10,
additionalMarginBottom: 10
});
}
});
//]]>
</script>
- Kemudian klik simpan dan lihat hasilnya
Catatan : #post-wrapper dan #sidebar-wrapper yang akan dibuat sticky jika blog kalian menggunakan id atau class css yang sedikit berbeda untuk mengatur bagian ini maka silahkan kalian sesuaikan sendiri ok.
Gunakan inspect elemen browser untuk mencari tau.
Script Theia Sticky Sidebar 1.7.0 ini hanya akan melakuakan sticky pada ukuran width 1120 jadi bisa cocok jika kalian menggunakan responsive template
Refrensi : github
