Let's dive right in:
The code I am working with is as follows:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And here is my CSS:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
I am using this for a forum to display active and new threads on the screen. The issue arises when viewing a thread, causing the header to disappear (expected behavior due to scrolling).
However, I want the thread menu to remain visible at all times by sticking to the side of the screen. This is achieved by setting my keep_up div to position: fixed. But because the menu is too long, it does not scroll up entirely.
My inquiry:
I aim to have the thread menu scroll up until it reaches the top of the window, after which it should stay there. How can I achieve this?
I have attempted various methods but none seem to work for me. Here is the code I tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110,
offsetTop = 100,
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
affix = 'top';
} else {
affix = false;
}
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the corresponding CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}