I attempted to create a scroll bar that adjusts its position based on the top value of a fixed div rather than the window.
According to jQuery documentation, the .position() function returns the element's current position relative to its offset parent.
The .position() method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent
The .offset() method is described as follows:
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
Based on this information, it appears that .position() should be relative to the parent while .offset() is always relative to the document.
I am trying to highlight my menu buttons based on the current scrolled position in a fixed div, not the window. However, the values I get from .position().top never seem to align with the fixed div's .scrollTop()
Here is a fiddle demonstrating the issue. When I adjust things to work based on the window, everything functions correctly. But as soon as I try to make it relative to the parent div, it behaves erratically.
For easier reference, here is the code:
Any assistance or insights would be greatly appreciated!
HTML
<div class="wrapper">
<div class="menu-left">
<div class="menu-item" data-target="sec1">
Section 1
</div>
<div class="menu-item" data-target="sec2">
Section 2
</div>
<div class="menu-item" data-target="sec3">
Section 3
</div>
<div class="menu-item" data-target="sec4">
Section 4
</div>
</div>
<div class="page-content">
<h2 class="header" id="sec1">Section 1</h2>
<div class="text-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</div>
<h2 class="header" id="sec2">Section 2</h2>
<div class="text-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</div>
<h2 class="header" id="sec3">Section 3</h2>
<div class="text-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</div>
<h2 class="header" id="sec4">Section 4</h2>
<div class="text-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</div>
</div>
</div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
padding-left: 240px;
display: block;
}
.menu-left {
background-color: #CCC !important;
height: 100%;
display: block;
width: 240px;
margin-left: -240px;
position: fixed;
z-index: 1000;
}
.page-content {
background-color: #666;
height: 100%;
width: 100%;
position: fixed;
padding: 10px;
overflow: scroll;
}
.menu-item {
border-bottom: 1px solid #000;
padding: 10px;
}
.menu-item:first-child {
border-top: 1px solid #000;
}
.text-block {
border: 1px solid #000;
width: 600px;
display: block;
padding: 10px;
}
.menu-item:hover,
.active {
background: #666;
color: #fff;
}
JavaScript
container = $(".page-content");
$(".menu-item").click(function(e) {
data_target = $(e.target).attr("data-target");
container.animate({
scrollTop: $("#" + data_target).offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
$('.menu-item').on('click', function(event) {
$('.menu-item').removeClass('active');
$(this).addClass('active');
});
container.on('scroll', function() {
//$(window).on('scroll', function() {
$('.header').each(function() {
if(container.scrollTop() >= $(this).offset().top) {
//if(container.scrollTop() >= $(this).position().top) {
//if ($(window).scrollTop() >= $(this).offset().top) {
var id = $(this).attr('id');
$('.menu-item').removeClass('active');
$('div[data-target=' + id + ']').addClass('active');
}
});
});