Seeking help to troubleshoot an issue I'm facing - I have two divs positioned relatively, with child elements positioned fixed within them. As I scroll the page, these two divs are supposed to become fixed to the top of the browser using the following code snippet:
//Code to make sub-nav and cart scroll with the page
$(document).ready(function() {
var stickySidebar = $('.sideSubNav, .cartcontainer').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sideSubNav, .cartcontainer').addClass('affix');
} else {
$('.sideSubNav, .cartcontainer').removeClass('affix');
}
});
});
.sideSubNav.affix,
.cartcontainer.affix {
position: fixed;
top: 0;
}
Previous to being fixed, the width of the divs matches that of the containing div. However, once fixed, the width shrinks. I am attempting to maintain the same width when fixed, but adding width: 100% causes it to span the entire page, disregarding the container. Fixed positioning seems to ignore the container's dimensions, unlike absolute positioning which respects them. Is there a workaround to ensure that fixed positioned divs respect their container? Keep in mind that I'm working with a responsive layout in Bootstrap 4.