Jak ustawić nazwę bieżącej sekcji działu w innym dziale?

Question

mam różne sekcje na mojej stronie tak:

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

i oddzielne div tak:

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

To div jest zawsze na górze strony. Jak zrobić to tak, że gdy użytkownik przewija do blue (lub jakikolwiek inny) div The current_div zmieni się następująco:

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

Oto skrzypce z moim znaczników: https://jsfiddle.net/wb7L954v/1/

Musi być prosty sposób, aby uzyskać część data-section i po prostu umieścić ją w tym div?

Answer 1

etapy:

• uzyskać wszystkie elementy z atrybutem
• data-section na scroll razie zrobić
  • iteracyjne nad wszystkich elementów (począwszy od ostatniego)
  • jeśli obecny scrollTop jest większy niż ten element offsetTop, jest to element, którego szukamy
  • pisać wartość data-section atrybutu tego elementu w odpowiednim elemencie nagłówka

Patrz: https://jsfiddle.net/Leydfd5b/

Answer 2

trzeba porównać offset górze każdej kolorowej części z głównym 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"); 
}); 

przykład: https://jsfiddle.net/DinoMyte/wb7L954v/2/

Answer 3

Jest to przykład, w którym działa na każdym kierunku przewijania.

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 (dla testu):

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

przykład robocza: https://jsfiddle.net/1aakar8s/1/

Jeśli chcesz się i przewijania w dół s o możesz użyć tego kodu 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)); 
};