How do I make the current div section's name show in another div?

Question

I have different sections on my page like this:

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

And a separate div like this:

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

That div is always at the top of the page. How do I make it so that when the user has scrolled to the blue (or any of the other) div, the current_div will change to this:

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

Here is a fiddle with my markup: https://jsfiddle.net/wb7L954v/1/

There must be a simply way to get the data-section part and simply put it inside that div?

Answer 1

The steps:

• get all elements with the data-section attribute
• on scroll event do
  • iterate over all elements (starting with the last one)
  • if the current scrollTop is larger than that element's offsetTop, that's the element we are looking for
  • write that element's data-section attribute's value in the appropriate header element

See: https://jsfiddle.net/Leydfd5b/

Answer 2

This is a example that works for every scrolling direction.

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 (for test):

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

Working example: https://jsfiddle.net/1aakar8s/1/

If you need up and down scroll so you can use this jQuery code:

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

Answer 3

You need to compare the offSet Top of each colored section with the main 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");
});

Example : https://jsfiddle.net/DinoMyte/wb7L954v/2/