Hey guys, I've found a solution to the issue at hand and thought I'd share my approach with you using some markup examples.
Let's consider two elements:
<div class="sidenav col-sm-3"></div>
<div class="main-content col-sm-9"></div>
If you were thinking of using the affixed plugin for the sidenav/sidebar element, it can actually complicate things. No need to go down that path or create a jQuery plugin for toggling classes. The fix is quite simple and involves media queries along with minor CSS adjustments.
In my scenario, I wanted the sidenav element not to scroll on larger screens, so here are the two media queries I added:
/* On small screens, set height to 'auto' for sidenav and grid
================================================================================= */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
div.sidenav.col-sm-3{
position:static;
}
}
/* On Larger Screens
================================================================================= */
@media screen and (min-width: 1200px) {
div.sidenav.col-sm-3{
position:fixed;
}
}
By simply adding these media queries, the issue was resolved without much complexity. The first query fixed the position of the sidenav element on larger screens by setting its position attribute to 'fixed'. The second query reverted this back to 'static' for mobile devices, where the default position value applies.
Feel free to adjust the screen sizes in the code and test it out. It should work smoothly. Have a great weekend everyone! High five emoji for digital success!
If the solution doesn't work for you, ensure your CSS specificity is adequate. Use tools like Firefox's Firebug to pinpoint and qualify your styles properly. For instance, instead of general styling like .classname{position:fixed;}, go for more specific selectors like div.sidenav.col-sm-3{position:fixed} based on your markup structure.
Your markup may require different levels of specificity, so tailor it accordingly :)