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>

AtheistP3ace · Accepted Answer · 2015-12-09 19:33:20Z

3

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/

edited Dec 9, 2015 at 19:33

answered Dec 9, 2015 at 19:14

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dee Over a year ago

This works thank you for the notes it makes better sense! Is there a reason why the jQuery is not also changing the text color on scroll (.headerLIchange)?

AtheistP3ace Over a year ago

@Dee updated answer for the text color. And you're welcome! Happy to help.

Korgrue · Accepted Answer · 2015-12-09 16:39:26Z

0

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

answered Dec 9, 2015 at 16:39

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery detect div location on scroll

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related