如何讓當前div部分的名稱顯示在另一個div中？

Question

我有這樣我的網頁上不同的部分：

<div class="red" data-section="Section Red"></div> 
<div class="blue" data-section="Section Blue"></div> 
<div class="yellow" data-section="Section Yellow"></div> 
<div class="green" data-section="Section Green"></div> 

和一個單獨的DIV像這樣：

<div class="current_div"></div> 

該div始終是在頁面的頂部。如何讓這個當用戶滾動到blue（或任何其他的）DIV，該current_div會變成這樣：

<div class="current_div">Section Blue</div> 

這裏是我的標記小提琴：https://jsfiddle.net/wb7L954v/1/

必須有一個簡單的方法來獲得data-section部分，並簡單地把它放在該div內？

Answer 1

步驟：

• 獲得與data-section屬性
• 所有元素上scroll事件做
  • 迭代所有元素（從最後一個）
  • 如果當前scrollTop大於該元素的offsetTop，這是我們正在尋找的元素
  • 寫在相應頭，該元素的data-section屬性的值

參見：https://jsfiddle.net/Leydfd5b/

Answer 2

您需要的最高點偏移比較主要的div每個彩色部分。

$(window).scroll(function() { 
    var $div = $(".current_div").offset().top; 
    if($div >= $(".red").offset().top) 
    $(".current_div").text("Section Red"); 
    if($div >= $(".blue").offset().top) 
    $(".current_div").text("Section Blue"); 
    if($div >= $(".yellow").offset().top) 
    $(".current_div").text("Section Yellow"); 
    if($div >= $(".green").offset().top) 
    $(".current_div").text("Section Green"); 
}); 

實施例：https://jsfiddle.net/DinoMyte/wb7L954v/2/

Answer 3

這是爲每一個滾動方向工作的例子。

HTML：

<div class="current_div">current div</div> 

<div class="red" data-section="Section Red">red</div> 
<div class="blue" data-section="Section Blue">blue</div> 
<div class="yellow" data-section="Section Yellow">yellow</div> 
<div class="green" data-section="Section Green">green</div> 

CSS（測試）：

*{margin: 0;} 
.current_div{position: fixed;background: #ccc;top: 0;width: 100%;} 
.red, .blue, .yellow, .green{height: 500px;} 
.red{background: red;} 
.blue{background: blue;} 
.yellow{background: yellow;} 
.green{background: green;} 

的jQuery：

$.fn.isOnScreen = function() { 
    var win = $(window); 
    var viewport = { 
     top: win.scrollTop(), 
     left: win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 
    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
}; 

var currentDiv = $('.current_div'); 

$(window).scroll(function() { 
    if ($('.red').isOnScreen() == true) { 
     currentDiv.text($('.red').data('section')); 
    } 
    else if($('.blue').isOnScreen() == true){ 
     currentDiv.text($('.blue').data('section')); 
    } 
    else if($('.yellow').isOnScreen() == true){ 
     currentDiv.text($('.yellow').data('section')); 
    } 
    else if($('.green').isOnScreen() == true){ 
     currentDiv.text($('.green').data('section')); 
    } 
}); 

工作例如：https://jsfiddle.net/1aakar8s/1/

如果需要上下滾動小號o你可以使用這個jQuery代碼：

$.fn.isOnScreen = function() { 
    var win = $(window); 
    var viewport = { 
     top: win.scrollTop(), 
     bottom: this.top + win.height() 
    }; 
    var bounds = this.offset(); 
    bounds.bottom = bounds.top + this.outerHeight(); 
    return (!(viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
};