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

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

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/wb7L954v/1/

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

• javascript
• jquery
• html
• css

• This looks like you haven't researched it at all. You should search, before asking. However I'll give you a hint – Mark E Commented Aug 24, 2016 at 18:34
• I did indeed search but I don't know what it would be called. I've spent like 12 hours searching (no joke). The closest thing I found was the Bootstrap style menu that highlights the current section you're at, but unfortunately that didn't help me in grabing the "data-section" part from the divs. I've exhausted nearly all options before writing here, believe me :) – theplau Commented Aug 24, 2016 at 18:35
• Thanks to this jsfiddle/U4qyp/32 – milan kyada Commented Aug 24, 2016 at 18:38
• 1 I'll give you a hint too: api.jquery./data/#data-html5 – yezzz Commented Aug 24, 2016 at 18:38
• well you want to scroll, and have something happen depending on the position in the page... So you'd want to google things about scrollbars. Which could lead to things like stackoverflow./questions/17441065/… – Tyler Commented Aug 24, 2016 at 18:38

3 Answers 3

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

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/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));
};

You need to pare 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/DinoMyte/wb7L954v/2/