jQuery檢測滾動上的div位置

我是jQuery的新手，我正在努力使jQuery檢測div .stage-O的位置，以便向下滾動時.header不會消失，直到該底部.stage -O點擊頁面的頂部？jQuery檢測滾動上的div位置

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

 
$(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' : ''); 
 
}); 
 
\t });

.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{ 
 
\t Background: white; 
 
} 
 

 
.headerLIchange{ 
 
\t 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>

來源

2015-12-09 Dee

這是你在找什麼？我更改了代碼很多，因爲它看起來像你的過於複雜。不知道你爲什麼附加兩個滾動事件。此外，我只是在舞臺課上添加了一個紅色邊框，這樣您就可以清楚地看到我們何時通過它的底部。

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

做

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

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

來源

2015-12-09 19:14:23 AtheistP3ace

這個作品，謝謝你的筆記，更理智的！是否有一個原因，爲什麼jQuery不改變滾動文本顏色（.headerLIchange）？ – Dee

@Dee更新了文字顏色的答案。不客氣！樂於幫助。 – AtheistP3ace

這可以幫助你：

<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

來源

2015-12-09 16:39:26 Korgrue

jQuery檢測滾動上的div位置

回答

相關問題