I have a divider where I have a large amount of text. I would like to track how far a user has scrolled through this element. I have a function where I can track how far the user has scrolled from the top of the page, this is not what I am trying to achieve. I am only looking to track the specific scroll value while scrolling through a div by class. I was thinking a good way to do this was to find out how far this element is from the top of the page on load, then adding this to the value of how far the user has scrolled down the page. Bare in mind with this example there is only one element before the section I would like to track, in reality, there are many. Furthermore sure I could just say well at 300px I will then get to this section, however with regards to responsivity this is not practical as it will always be changing. So ideally if there was a way to onload measure how far '.show-back' is from the top of the page would be amazing.
$(document).ready(function(){
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
});
});.another-element {
height: 300px;
width: 100%;
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="another-element">
</div>
<div class="show-back">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
</div>