I am trying to implement a fixed sidebar with dynamically loaded items onclick a Load More
button.
I am attaching a class fixed
to the parent sidebar div and innerscroll
to the inner div to make it scrollable.
.fixed{position:fixed;top:0; bottom:0}
.innerscroll{overflow-y:scroll;height:100%}
Sidebar code
<div id="sidebar" class="sticky">
<div class="cat-select"><select>
...
</select></div>
<div class="item">
<section id="ajax-load-more">
... ajax content...
</section>
</div>
</div>
Can't figure out why after loading the next set of posts I can't scroll to the end such that the load-more button is visible.
OK, I got it. Just add two lines in your .fixed
class:
.fixed {
position: fixed;
top: 0;
bottom: 45px; /* added */
min-height: 0 !important; /* added */
}
And this will work exactly as you expected. Good luck!
I believe it's because you have the inner-scroll div set to height:100%. I changed it to height: 90% - the button is now visible, and your content is still scrollable. I don't know why setting it to height 100% would knock out your button, though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With