I am working on creating a lengthy scrollable list of grouped items where the group titles remain visible at all times (stacked). When a user clicks on a group header, the page should scroll to the corresponding items.
I have successfully used the position: sticky property to keep the group headers in view. However, please note that this method may have compatibility issues with Internet Explorer.
My challenge arises when I try to scroll to the sticky header upon clicking. The positioning is not as smooth as desired, and the group items end up behind the sticky headers.
For better clarity, I have created a visual example: https://i.sstatic.net/YWy7F.png
Here is a JSFiddle demonstrating my current progress: https://jsfiddle.net/n6urjabk/1/
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #20262E;
padding: 20px;
box-sizing: border-box;
font-family: Helvetica;
}
#container {
/*display:flex;*/
max-height: 100%;
height: 400px;
}
.column {
background: #eee;
box-sizing: border-box;
overflow: auto;
position: relative;
max-height: 400px;
}
.row {
background: #eee;
border-radius: 0px;
margin: 0;
padding: 10px;
}
.row:nth-child(odd) {
background: #fff;
}
.column h4 {
background: lightblue;
padding: 10px;
margin: 0;
position: sticky;
height: 40px;
box-sizing: border-box;
text-align: center;
}
.column h4:hover {
opacity: 0.8;
cursor: pointer;
}
.column h4:nth-of-type(odd) {
background: lightgreen;
}
</style>
<div id="container">
<div class="column">
<h4 class="header1" id="test1">
Head 1
</h4>
<div class="content">
<div class="row">row 1.1</div>
<div class="row">row 1.2</div>
<div class="row">row 1.3</div>
<div class="row">row 1.4</div>
<div class="row">row 1.5</div>
<div class="row">row 1.6</div>
<div class="row">row 1.7</div>
<div class="row">row 1.8</div>
</div>
<h4 class="header2" id="test2">
Head 2
</h4>
<div class="content">
<div class="row">row 2.1</div>
<div class="row">row 2.2</div>
<div class="row">row 2.3</div>
<div class="row">row 2.4</div>
<div class="row">row 2.5</div>
<div class="row">row 2.6</div>
<div class="row">row 2.7</div>
<div class="row">row 2.8</div>
</div>
<h4 class="header3" id="test3">
Head 3
</h4>
<div class="content">
<div class="row">row 3.1</div>
<div class="row">row 3.2</div>
<div class="row">row 3.3</div>
<div class="row">row 3.4</div>
<div class="row">row 3.5</div>
<div class="row">row 3.6</div>
<div class="row">row 3.7</div>
<div class="row">row 3.8</div>
</div>
<h4 class="header4" id="test4">
Head 4
</h4>
<div class="content">
<div class="row">row 4.1</div>
<div class="row">row 4.2</div>
<div class="row">row 4.3</div>
<div class="row">row 4.4</div>
<div class="row">row 4.5</div>
<div class="row">row 4.6</div>
<div class="row">row 4.7</div>
<div class="row">row 4.8</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var headers = $('h4').length;
var headerHeight = 40;
var maxOffset = (headers * headerHeight) - headerHeight;
$('h4').each(function() {
var index = $(this).index('h4');
var top = index * headerHeight;
var bottom = maxOffset - top;
$(this).css('top', top).css('bottom', bottom);
});
$('h4').on('click', function() {
$(this).next()[0].scrollIntoView({
block: 'start',
behavior: 'smooth'
});
});
</script>