Floating sticky sidebar is not working as intended

Floating sticky sidebar is not working as intended - javascript

Updated
I have tried my best to reflect my scenario. The sidebar won't show at start, and it can be hidden by a user if desired. The HTML document looks like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<style>
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
#editUnitBlock{
display: none;
width: 100%;
position: relative !important;
}
#editUnitBlock .ibox-content{
padding: 25px 0px 10px 0px;
border: 0px;
}
.floorStackColSmall {
max-width: 58.333333%;
}
.floorStackColLarge {
max-width: 83.333333%;
}
/*#unitAmenitiesLoading{
position: relative;
}*/
#unitAmenitiesLoading.sticky {
position:fixed;
top:5px;
width: inherit;
max-width: 25%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container-fluid main-conatiner">
<div class="starter-template">
<div class="row">
<div class="col-md-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies.
Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida.
Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam.
Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt.
Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin.
</p>
</div>
<div id="floorStackTable" class="col-md-10 floorStackColLarge">
Show sidebar
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies.
Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida.
Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam.
Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt.
Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin.
</p>
</div>
<div class="col-md-3 " id="editUnitBlock">
<div id="unitAmenitiesLoading" class="ibox-content">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">SIDEBAR TO BE STICKY</h5>
HideSideBar
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis.
</p>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<h2>Footer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum.
</p>
</footer><br type="_moz">
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>
function editUnit(){
showEditUnitBlock();
}
function showEditUnitBlock()
{
$('#editUnitBlock').show();
// $('#unitAmenitiesLoading').floatit({
// limiter: 'footer',
// preserve_width: true,
// top_spacing: 40,
// bottom_spacing: 10,
// recalculate: true
// });
$('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge");
}
function hideEditUnitBlock()
{
$('#editUnitBlock').hide();
$('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall");
}
</script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.floatit.js"></script>
<script>
$(function(){
// $('#unitAmenitiesLoading').floatit({
// limiter: 'footer',
// preserve_width: true,
// top_spacing: 40,
// bottom_spacing: 10,
// recalculate: true
// });
// Cache our vars for the fixed sidebar on scroll
var $sidebar = $('#unitAmenitiesLoading');
// Get & Store the original top of our #sidebar-nav so we can test against it
var sidebarTop = $sidebar.position().top;
var $footer = $('#footer');
var footerTop = $footer.position().top;
// Edit the `- 10` to control when it should disappear when the footer is hit.
var blogHeight = $('#floorStackTable').outerHeight() - 10;
console.log(blogHeight);
console.log(sidebarTop);
console.log(footerTop);
// Add the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);
// On window scroll, this fn is called (binded above)
function fixSidebarOnScroll(){
// Cache our scroll top position (our current scroll position)
var windowScrollTop = $(window).scrollTop();
console.log(windowScrollTop);
// Add or remove our sticky class on these conditions
if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop || window.innerHeight + window.scrollY > blogHeight){
// Remove when the scroll is greater than our #content.OuterHeight()
// or when our sticky scroll is above the original position of the sidebar
$sidebar.removeClass('sticky');
}
// Scroll is past the original position of sidebar
else if (windowScrollTop >= sidebarTop){
// Otherwise add the sticky if $sidebar doesnt have it already!
if (!$sidebar.hasClass('sticky')){
$sidebar.addClass('sticky');
}
}
}
})
</script>
</body>
</html>
The sidebar seems to be fixed, but only whenever we scroll right to the footer. I would like the side-nav to be scrolled up instead of directly being moved to its relative position.
Please, check the code available at jsfiddle to help me to solve this issue. By the way, i am open to solving this by using any other jquery plugin or even with the custom script as well.
I am quite new to the JQuery Framework, if any one can help me by correcting the jsfiddle code it would be appriciated.
Thank You.
Please, let me know if there is anything I can do to further clarify this issue I am attempting to resolve.
Update: 2.0
I am looking something like http://webpop.github.io/jquery.pin/, here you can see that a box got pinned on the sidebar, it remained fixed upto certain scroll point then start scrolling thereafter.

You could use CSS's position: sticky; instead. This way you don't need to worry about adding a class at a certain point either.
https://jsfiddle.net/htbLm8rw/

in such cases, mostly I use "Simple sticky Sidebar" jQuery plugin. Simple Sticky Sidebar code & documentation can be found here https://github.com/ismailfarooq/simple-sticky-sidebar
See below example:
.text{
padding-bottom: 50px;
padding-top: 20px;
border-bottom: 1px solid #ccc;
}
.footer{
background: #333;
color: #fff;
padding: 30px 0;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<header class="main-header">
<div class="container"><h3>Simple Sticky Sidebar</h3></div>
</header>
<div class="area"><h1>Simple Sticky Sidebar</h1></div>
<div class="row">
<div class="col-lg-3 col-sm-3">
<div class="sidebar">
<div class="sidebar-inner">
<div class="text"> <h2> Sidebar Content</h2></div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
<div class="text">Sidebar Content</div>
</div>
</div>
</div>
<div class="col-lg-9 col-sm-9">
<div class="search-content">
<div class="content">
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p> </div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text">content</div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p> </div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text">content</div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p> </div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text">content</div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
<div class="text"><h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. </p></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<h2> #FOOTER Content </h2> <br/>
#FOOTER<br/>
#FOOTER<br/>
#FOOTER<br/>
#FOOTER<br/>
#FOOTER<br/>
</div>
<!--
<script type="text/javascript" src="js/simple-sticky-sidebar.js"></script>
-->
<!-- Uncomment this script and add Simple Sticky Sidebar JS from your local. You can download Simple Sticky Sidebar from Github Repo -->
<!-- Remove below when you are working on local -->
<script>
/* ========================================================================
* Simple Sticky Sidebar
* #version 0.1
* #author Ismail Farooq <ismail_farooq#yahoo.com>
* #license The MIT License (MIT) (https://github.com/ismailfarooq/simple-sticky-sidebar/blob/master/LICENSE)
* ======================================================================== */
function setStyle(element, cssProperty) {
for (var property in cssProperty){
element.style[property] = cssProperty[property];
}
}
function destroySticky(element){
setStyle(element, {
top : '',
left : '',
bottom : '',
width : '',
position : ''
});
}
function getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
function simpleStickySidebar(element, options) {
// Global options
var sticky = document.querySelector(element); // Sticky sidebar
var container = document.querySelector(options.container); // Sticky sidebar container
var topSpace = options.topSpace ? options.topSpace : 0; // Top spacing after sticky
var bottomSpace = options.bottomSpace ? options.bottomSpace : 0; // Bottom spacing after sticky
// vars
var $window = window; // window
var stickyHeight = sticky.getBoundingClientRect().height; // Sticky sidebar height
var stickyOffsetTop = getOffset(sticky).top; // Sticky sidebar top offset
var stickyOffsetBottom = getOffset(sticky).top + sticky.getBoundingClientRect().height; // Sticky sidebar bottom offset
var stickyOffsetLeft = getOffset(sticky).left; // Sticky sidebar left offset
var topFixed = false; // checkpoint
var bottomFixed = false; // checkpoint
var lastScrollVal = 0; // checkpoint
var getStickyHeight = function() {
return document.querySelector(element).getBoundingClientRect().height;
};
// scrolling
window.addEventListener('scroll', function(event) {
var scrollTop = window.scrollY;
// when scroll position touch the "Sidebar"
if(scrollTop > stickyOffsetTop - topSpace){
// if "Sidebar" smaller than viewport
if(getStickyHeight() <= $window.innerHeight - topSpace){
// fix "Sidebar" from top
setStyle(sticky, {
top : topSpace + "px",
left : stickyOffsetLeft + "px",
bottom : '',
width : sticky.getBoundingClientRect().width + "px",
position : 'fixed'
});
}
else {
// scrolling down
if (scrollTop > lastScrollVal){
// if "Sidebar" fixed from top during scrolling down
if(topFixed){
// get new offset of "Sidebar"
var absoluteStickyOffsetTop = getOffset(sticky).top;
setStyle(sticky, {
top : absoluteStickyOffsetTop - getOffset(container).top + "px",
left : '',
bottom : '',
width : '',
position : 'absolute'
});
topFixed = false;
}
// make "Sidebar" fixed from bottom when bottom area visible in viewport
if(scrollTop > stickyOffsetBottom - $window.innerHeight){
setStyle(sticky, {
top : '',
left : stickyOffsetLeft + "px",
bottom : bottomSpace + "px",
width : sticky.getBoundingClientRect().width + "px",
position : 'fixed'
});
bottomFixed = true;
}
} else { // scrolling up
// get new offset of "Sidebar" during scrolling up
var absoluteStickyOffsetTop = getOffset(sticky).top;
// if "Sidebar" fixed from bottom, stop sticky to its position
if(bottomFixed){
setStyle(sticky, {
top : absoluteStickyOffsetTop - getOffset(container).top + "px",
left : '',
bottom : '',
width : '',
position : 'absolute'
});
bottomFixed = false;
}
// make "Sidebar" fixed from top when top area visible in viewport
if(scrollTop < absoluteStickyOffsetTop - topSpace){
setStyle(sticky, {
top : topSpace + "px",
left : stickyOffsetLeft + "px",
bottom : '',
width : sticky.getBoundingClientRect().width + "px",
position : 'fixed'
});
topFixed = true;
}
}
lastScrollVal = scrollTop;
}
} else {
// make sidebar to default position
destroySticky(sticky);
}
});
}
</script>
<!-- Remove above -->
<script type="text/javascript">
simpleStickySidebar('.sidebar-inner', {
container: '.sidebar',
topSpace: document.querySelector('.main-header').getBoundingClientRect().height + 20, // or any no i.e 20
bottomSpace : document.querySelector('.footer').getBoundingClientRect().height + 20
});
</script>

Add a div inside the .col class which has to have "sticky" functionality. Give that div a class to style it with and set position: sticky on that div.
This wil allow the new div to become sticky or static based on the room in the column of the parent.
You can set the trigger offsets with top, left, right and bottom.
Checkout the snippet to see it in action.
$(function() {
// $('#unitAmenitiesLoading').floatit({
// limiter: 'footer',
// preserve_width: true,
// top_spacing: 40,
// bottom_spacing: 10,
// recalculate: true
// });
// Cache our vars for the fixed sidebar on scroll
var $sidebar = $('#unitAmenitiesLoading');
// Get & Store the original top of our #sidebar-nav so we can test against it
var sidebarTop = $sidebar.position().top;
var $footer = $('#footer');
var footerTop = $footer.position().top;
// Edit the `- 10` to control when it should disappear when the footer is hit.
var blogHeight = $('#floorStackTable').outerHeight() - 10;
// console.log(blogHeight);
// console.log(sidebarTop);
// console.log(footerTop);
// Add the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);
// On window scroll, this fn is called (binded above)
function fixSidebarOnScroll() {
// Cache our scroll top position (our current scroll position)
var windowScrollTop = $(window).scrollTop();
//console.log(windowScrollTop);
// Add or remove our sticky class on these conditions
if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop || window.innerHeight + window.scrollY > blogHeight) {
// Remove when the scroll is greater than our #content.OuterHeight()
// or when our sticky scroll is above the original position of the sidebar
$sidebar.removeClass('sticky');
}
// Scroll is past the original position of sidebar
else if (windowScrollTop >= sidebarTop) {
// Otherwise add the sticky if $sidebar doesnt have it already!
if (!$sidebar.hasClass('sticky')) {
$sidebar.addClass('sticky');
}
}
}
})
.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
bottom: 50px;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
#editUnitBlock {
display: none;
width: 100%;
position: relative !important;
}
#editUnitBlock .ibox-content {
padding: 25px 0px 10px 0px;
border: 0px;
}
.floorStackColSmall {
max-width: 58.333333%;
}
.floorStackColLarge {
max-width: 83.333333%;
}
/*#unitAmenitiesLoading{
position: relative;
}*/
#unitAmenitiesLoading.sticky {
position: fixed;
top: 5px;
width: inherit;
max-width: 25%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container-fluid main-conatiner">
<div class="starter-template">
<div class="row">
<div class="col-md-2">
<!-- Added sticky here -->
<div class="sticky">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra
at pretium erat.
</p>
</div>
<!-- -->
</div>
<div id="floorStackTable" class="col-md-10 floorStackColLarge">
Show sidebar
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium
erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat
maximus purus nec ultricies. Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus,
eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed
a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida. Sed mattis,
dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum
enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio
sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam. Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius,
purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque
sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt. Donec
sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam
enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia
nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis
quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin.
</p>
</div>
<div class="col-md-3 " id="editUnitBlock">
<div id="unitAmenitiesLoading" class="ibox-content">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">SIDEBAR TO BE STICKY</h5>
HideSideBar
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis.
</p>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<h2>Footer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum.
</p>
</footer><br type="_moz">
</div>
</main>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>
function editUnit() {
showEditUnitBlock();
}
function showEditUnitBlock() {
$('#editUnitBlock').show();
// $('#unitAmenitiesLoading').floatit({
// limiter: 'footer',
// preserve_width: true,
// top_spacing: 40,
// bottom_spacing: 10,
// recalculate: true
// });
$('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge");
}
function hideEditUnitBlock() {
$('#editUnitBlock').hide();
$('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall");
}
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.floatit.js"></script>
</body>
</html>

Related

Auto change the height of arrow according to content height (Liquid slider)

From the screenshots, you can see the arrows are not auto adjust according to the content height when I press to next slide.
I want the dynamic height for arrow, to be displayed in the middle of the content.
I refer the code from Liquid Slider, you can check here or see my issue below. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 40% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

By overiding the arows css , setting the margin-top to 0 and top to 50% as follow :
[class$="-arrow"] {
....
top:50%;
margin-top:0 !important;
...
}
See below snippet :
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
top:50%;
margin-top:0 !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Hope this is helpful to you. Here i removed margin from top and added position to slider arrows.
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 0;
position:relative;
top: 50%;
}
.liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow {
margin-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Bootstrap Affix triggered once past certain div

I'm trying to get the bootstrap affix top offset to work without using the number of pxiels, but by triggering it after it goes past a certain div. I've got the affix to stop being triggered once it gets to the bottom, but I'm having an issue getting it started in the correct place.
Below is my code and here is a JSFiddle. I would like the sidebar to not be triggered until the user goes past the div #content-header and then the sidebar sits on the top right side of the page. However the sidebar currently just sits at the top.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
return $('#content-header').height(true)
},
bottom: function() {
return (this.bottom = $('#footer-wrapper').outerHeight(true))
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper.affix {
top: 30px;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>
Updated:
Removed true from .height(true) so it now triggers after #content-header. However it only works the first time and once you reach the bottom of the page the sidebar seems to jump back up to the top.
Updated JSFiddle here.

If I understand you correctly, remove the true param from the method height. .hight(true) returns the jQuery element itself but not the height.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
var a = $('#content-header').height();
return a;
},
bottom: function() {
var a = $('#footer-wrapper').outerHeight(true);
//console.log(a);
return a;
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper {
padding-top: 30px;
}
#sidebar-wrapper.affix {
top: 0;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>

Enable checkbox when the user has scrolled to the bottom of a T&C page?

my html sample div class :
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
my css :
#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}
Can someone tell me the JS or JQuery for enabling the checkbox when the user has scrolled to the bottom of the T&C page ? I have tried other answers too but none of them worked. The checkbox remains disabled whatever I do.

use below script,
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
here is runnable demo : https://jsbin.com/cajusebera/edit?html,js,output

Im not a Jquery Expert but just by googling I created this example. I hope it helps!
jQuery(function($) {
$('#terms').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#payment').removeAttr("disabled")
}
})
});
#terms {
width: 780px;
height: 150px;
overflow-y: scroll;
border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

Close other opened divs when current divs is opened (jQuery)

I got a couple of elements that shows a div when clicked on it. The only problem is when you click them all, all divs are opened instead of just the one that was clicked.
My jquery:
<script>
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
var type = $(this).attr('data-toggle');
$('.'+type).slideToggle("slide");
});
});
</script>
My html/php:
<section class="def-section home-services">
<div class="container">
<div class="row">
<?php
foreach($blocks as $block) {
$images = json_decode($block->images);
echo '
<!-- === SERVICE ITEM === -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;">
<div class="service-mark-border-top"></div>
<div class="service-mark-border-right"></div>
<div class="service-mark-border-bottom"></div>
<div class="service-mark-border-left"></div>
<div class="service">
<div class="service-icon">
<img src="cms/'.$images->image_intro.'" />
</div>
<h3>'.$block->title.'</h3>
<div class="service-text">
<p>'.$block->introtext.'</p>
</div>
</div>
</div>
';
}
?>
<div class="row zee-container-vervoer" style="display:none;">
<div class="text">
<p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row gevoelige-lading" style="display:none;">
<div class="text">
<p>Speciale lading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row temperatuur-gevoelige-lading" style="display:none;">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row explosieve-lading" style="display:none;">
<div class="text">
<p>Gevaarlijke stoffen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
</div>
</section>
Everything is now filtered by the alias of the correct element (class name is the same as the alias). How can I close all other elements except for the one that is currently opened?

Try this (based and thanks to Juan C. comment):
$('.' + type).slideToggle("slide").siblings(".row").hide();

Try this :
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
$(".servicemark").slideUp();
$(this).slideDown();
})
})

Hide content until its parent is clicked

How can I hide each p.list-group-item-text in the following HTML, until its parent a.list-group-item is clicked, then hide again when anything else is clicked?
The solution must be compatible with mobile.
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
</div>

You can do this using the CSS :focus pseudo class selector. Just set display: none on the elements you want to hide, then set display: block on the same element when it's parent has focus.
p.list-group-item-text {
display: none;
}
a.list-group-item:focus p.list-group-item-text {
display: block;
}
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
</div>

$(function() {
//hide all the text items
$('.list-group-item-text').hide();
//add a click handler to the href by class
$('.list-group-item').click(function() {
//get the child element
var text = $(this).find('.list-group-item-text');
//get its state
var state = text.is(":visible");
//hide all the other items
$('.list-group-item-text').hide();
if (state == false) //show if it was hidden
text.show();
});
});
JSFiddle

You can use Andrew Van Till's answer. And if you want the text to also hide when clicked again you can update his jQuery code to this;
$(function() {
$('.list-group-item-text').hide();
$('.list-group-item').click(function(){
if ($(this).find('.list-group-item-text').is(':visible')) {
$(this).find('.list-group-item-text').hide();
} else {
$(this).find('.list-group-item-text').show();
}
});
});

If you have a lot of repetitive content, I recommend using a templating library like Handlebars. Build up a Javascript array with the content you want (possible returned from an Ajax query) and then use the template to fill in the list.
As for the list group item, start with an empty list-group div, and register a click() handler (using jQuery for instance) that calls your function that utilizes your template.
Here is a jsfiddle example. The javascript:
$(function() {
$(".list-group").click(function() {
var source = $("#item-template").html();
var template = Handlebars.compile(source);
var data = [
{heading:"List group item heading 1",text:"Lorem ipsum 1"},
{heading:"List group item heading 2",text:"Lorem ipsum 2"}
];
for( var i=0; i<data.length; i++ ) {
$(".list-group").append(template(data[i]));
}
});
});
And the HTML:
<div class="list-group">
Click to expand
</div>
<script id="item-template" type="text/x-handlebars-template">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{heading}}<b class="caret"></b></h4>
<p class="list-group-item-text">{{text}}</a>
</script>

You can use jQuery toggle, fiddle:
It will toggle hide and show on the selector. Check the snippet below. and to hide if clicked outside add click event on document but check condition
if(!$(e.target).hasClass('list-group-item-heading'). Refer the second snippet.
$("p.list-group-item-text").hide();
$(".list-group-item-heading").on("click",function(){
$(this).next("p.list-group-item-text").toggle('slow');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
</div>
Update Fiddle, to close if clicked outside
$("p.list-group-item-text").hide();
$(".list-group-item-heading").on("click",function(){
$(this).next("p.list-group-item-text").toggle('slow');
$(this).parents('.list-group-item').siblings().find("p.list-group-item-text").hide('slow');
})
$(document).on('click',function(e){
if(!$(e.target).hasClass('list-group-item-heading') )
{
$("p.list-group-item-text").hide('slow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
</a>
</div>

We Keep Coding

JavaScript is the programming language of the Web.