Question

我是jQuery的新手，我正在努力让jQuery检测div .stage-O的位置，以便在向下滚动时.header不会消失直到底部.stage-O点击页面顶部？

＆＃13;

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' : '');
});
	});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是你在找什么？我更改了代码，因为看起来你的代码有点过于复杂了。不确定为什么要附加两个滚动事件。此外，我只是在舞台上添加了一个红色边框，这样你就可以清楚地看到我们何时通过它的底部。

小提琴：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;
});

它只是跟踪lastScroll以确定我们是上升还是下降。如果我们下降让我们通过获取它的偏移量加上它的高度（它的底部）来检查我们是否已经通过了stage0 div。如果我们向上滚动，让我们看看我们是否高于stage0 div的底部，如果不是我们正在向上滚动但尚未达到它。

至于你关于文字颜色的问题，它不起作用，因为你在标题上设置了级联的颜色，但你也有这个：

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

这是一个更具体的选择器，因此它会覆盖较高的选择器。而不是

.headerLIchange {
    color: Blue;
}

DO

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

小提琴：http://jsfiddle.net/AtheistP3ace/4hs7n0Lq/1/

Answer 2

这可能会对您有所帮助：

<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>

参考： http://www.quackit.com/html/codes/div_scroll_position.cfm

jQuery在滚动时检测div位置

2 个答案: