Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar changes when it is affixed. My goal is to maintain the same width for the sidebar whether it's in its normal state or affixed. Any assistance on this matter would be greatly appreciated. Thank you in advance! Please note: Kindly view the fiddle in desktop mode.
var toggleAffix = function(affixElement, scrollElement, wrapper) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top - 58;
if (scrollElement.scrollTop() >= top) {
wrapper.height(height);
affixElement.addClass("affix");
} else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
$('#top-affix').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, $(this), wrapper);
});
// init
toggleAffix(ele, $(window), wrapper);
});body {
padding-top: 3.625rem;
}
.container-fluid {
max-width: 1300px;
}
.projects-wrp .title {
background-image: -webkit-gradient(linear, left bottom, right top, from(#0a0b0c), color-stop(#121315), color-stop(#17191b), color-stop(#1d1f22), to(#222529));
background-image: linear-gradient(to right top, #0a0b0c, #121315, #17191b, #1d1f22, #222529);
color: #fff;
padding: 0.75rem;
}
.projects-wrp .title h2 {
font-size: 1.5rem;
}
.projects-wrp .affix {
position: fixed;
top: 3.625rem;
right: 0;
left: 0;
z-index: 1030;
}
.projects-wrp .sidebar-lft h4 {
font-size: 1.125rem;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6J..." crossorigin="anonymous">
</head>
<body class="projects-wrp" style="height: 1500px;">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="title">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h2 class="mb-0"> Avacadu.com[Onpage Seo Only]</h2>
</div>
</div>
</div>
</div>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-3" id="top-affix">
<aside class="sidebar-lft affix-container" style="background: #ccc;">
<h4><i class="fas fa-clipboard-list"></i> Categories</h4>
<p class="mb-0">
<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
<p>sdfghjkliutrsdfgh</p>
</aside>
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-9">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></scri...