Seeking assistance with creating a fixed category bar for blogs on scroll, which should always remain on the right side of the screen. The issue I'm facing is that the current setup causes the bar to switch sides and shrink in size when scrolling past the first article. My styles are based on Bootstrap version 4, so it's likely related to the grid system.
I came across a thread online that mentions JSS as a possible solution, but I'm struggling to implement it effectively due to poor documentation. More information can be found at this GitHub link: https://github.com/dvtng/jss.
var prevWidth = $(window).width();
if ($(window).width() > 767) {
$('ul.nav li.dropdown').hover(function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.navbar .dropdown > a').click(function() {
"use strict";
location.href = this.href;
});
}
var $window = $(window),
$stickydiv = $('#cat-div'),
$divTop = $stickydiv.offset().top,
$pos = $stickydiv.position(),
$posleft = $pos.left;
/*jss.set('.sticky', {
'left': $posleft
});*/
$window.scroll(function() {
$stickydiv.toggleClass('sticky', $window.scrollTop() > $divTop);
});
window.onresize = function() {
"use strict";
if ($(window).width() < 767 && prevWidth > 767) {
location.reload();
setNewHeight();
} else if ($(window).width() > 767 && prevWidth < 767) {
location.reload();
setNewHeight();
}
/* $pos = $stickydiv.position();
$posleft = $pos.left;
jss.set('.sticky', {
'left': $posleft
});*/
};
function setNewHeight() {
"use strict";
prevWidth = $(window).width();
}@charset "utf-8";
/* CSS Document */
.title {
font-family: vatican;
}
.soph {
font-family: Sophisto;
}
.of-auto {
overflow: auto;
}
#cat-div.sticky {
position: fixed;
top: 63px;
}
div.splat {
background-color: rgba(0, 0, 0, 0.3);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2 class="title">Explore The Blog</h2>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Some Title <small>February 2, 2018</small></h3>
<p class="soph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit... (truncated for brevity)