Hi I'm working bootstrap 4. here i tried to add affix to the sidebar. I have added three columns for sidebar & made them fixed when meets the certain condition. But the problem is width is changing when the sidebar affix. So i want the sidebar with same width when it is normal & affixed. Please help me. Thanks in advance. Note: Please see the fiddle in desktop view.
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/dAiS6JXm" 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"></script>
</body>
</html>
