Two columns are displayed here, with the left column showing a list and the right column displaying information based on the selected element from the list.
Due to the large size of the list, I implemented a feature where the right column stays fixed at the top of the window when the div reaches that position. This behavior mimics Bootstrap affix functionality, although I achieved it using a custom directive.
To make this work, I had to set the parent div (module-description) to have a relative position so that it scrolls to the top. Then, I added the class sticky to the child div (using the directive), which makes it become fixed, and removes the class when scrolling up.
Here is the HTML for the right column:
<div class="animated delay fade-in-right module-description">
<div id="module-panel" class="panel" affix affix-on-refresh="scrollTop" affix-offset-class="top"></div>
</div>
These are the CSS styles affecting these two divs:
.module-description {
float: right;
width:50%;
margin:0 auto;
max-height: 600px;
padding: 0 15px;
position: relative;
.panel {
height: 600px;
max-width: 555px;
overflow-y: scroll;
}
}
.sticky {
position: fixed;
}
Although everything functions perfectly in Chrome, the issue arises in Firefox where, despite applying the class sticky, the right column does not fix itself at the top but continues to scroll upward.
I suspect this may be due to some compatibility issues. If needed, I can provide more details about my directive.