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.
