jQuery detect div location on scroll

Question

I'm new to jQuery and am struggling with making the jQuery detect the location of div .stage-O so that when scrolling down the .header doesn't disappear until the bottom of that .stage-O hits the top of the page?

jQuery(document).ready(function () {
    var lastFixPos = 0,
	threshold = 100, //sensitivity on scrolling
  	$header = $('.header');
	
	

$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  var diff = Math.abs($(window).scrollTop() - lastFixPos);

  if (diff > threshold || st < 100) {
    if (st < lastFixPos) {
      // scroll up
      $header.removeClass('hide').addClass('color headerBGchange headerLIchange');
    }
    lastFixPos = st;
  } else if (st > lastFixPos) {
    //scroll down 
    $header.addClass('hide').removeClass('color');
  }

});

$(window).scroll(function(e) {
    var sw = $('.header'),
        pg = $('.stage-2'),
        diff = pg[0].offsetbottom - window.pageYOffset;
            
    sw.css('background-color', diff < 100 ? 'white' : '');
});
	});

.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 80px;
  -webkit-transition: top 250ms ease;
  transition: top 250ms ease;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: transparent;
  overflow: hidden;
}
.header ul {
  margin: 20px;
  padding: 0;
}
.header ul li {
  display: inline-block;
  margin-right: 20px;
  color: green;
}
.header ul li:last-child {
  margin-right: 0;
}

.hide {
  top: -80px;
}

.headerBGchange{
	Background: white;
}

.headerLIchange{
	color: Blue;
}

.stage {
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  background-color: bisque;
  font-size: 48px;
}

.stage-0 {
  background: black;
}

.stage-1 {
  background: #030202;
}

.stage-2 {
  background: #060505;
}

.stage-3 {
  background: #080707;
}

.stage-4 {
  background: #0b0a09;
}

.stage-5 {
  background: #0e0c0b;
}

.stage-6 {
  background: #110e0e;
}

.stage-7 {
  background: #141110;
}

.stage-8 {
  background: #161312;
}

.stage-9 {
  background: #191515;
}

.stage-10 {
  background: #1c1817;
}

.stage-11 {
  background: #1f1a19;
}

.stage-12 {
  background: #221d1c;
}

.stage-13 {
  background: #241f1e;
}

.stage-14 {
  background: #272120;
}

.stage-15 {
  background: #2a2422;
}

.stage-16 {
  background: #2d2625;
}

.stage-17 {
  background: #302827;
}

.stage-18 {
  background: #322b29;
}

.stage-19 {
  background: #352d2c;
}

.stage-20 {
  background: #38302e;
}

.stage-21 {
  background: #3b3230;
}

.stage-22 {
  background: #3e3432;
}

.stage-23 {
  background: #413735;
}

.stage-24 {
  background: #433937;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="header">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>

Answer 1

Is this what you are looking for? I changed the code quite a bit because it seemed like yours was a little overly complicated. Not sure why you were attaching two scroll events. Also I just added a red border to the stage class so you could clearly see when we were passing the bottom of it.

Fiddle: http://jsfiddle.net/AtheistP3ace/4hs7n0Lq/

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide').removeClass('color');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('color headerBGchange headerLIchange');
        } else {
            header.removeClass('hide').addClass('color headerBGchange headerLIchange');
        }
    }
    lastScrollTop = scrollTop;
});

It simply tracks the lastScroll to determine if we are going up or down. If we are going down lets check if we have passed the stage0 div by getting its offset plus its height (the bottom of it). If we are scrolling up lets see if we are above the bottom of the stage0 div, if not we are scrolling up but have not reached it yet.

As to your question about the text color its not working because you set the color on the header which would cascade down but you also have this:

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: green;
}

Which is a more specific selector so it overrides the higher one. So instead of

.headerLIchange {
    color: Blue;
}

do

.header.headerLIchange ul li {
    color: Blue;
}

Fiddle: http://jsfiddle.net/AtheistP3ace/4hs7n0Lq/1/

Answer 2

This might help you:

<body onload="document.getElementById('scrollBox').scrollTop = document.getElementById('scrollPosition').value;">
<input type="hidden" id="scrollPosition" />
<div id="scrollBox" style="overflow:scroll;height:100px;width:150px;" onscroll="javascript:document.getElementById('scrollPosition').value = this.scrollTop">
...content goes here...
...more content...
...link goes here...
</div>
</body>

Ref: http://www.quackit.com/html/codes/div_scroll_position.cfm