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?

This looks like you haven't researched it at all. You should search, before asking. However I'll give you a [hint](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) — Mark E, Aug 24 '16 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 :) — user1996496, Aug 24 '16 at 18:35
Thanks to [this](http://stackoverflow.com/questions/6597904/scrollable-div-which-elements-can-be-seen) http://jsfiddle.net/U4qyp/32/ — milan kyada, Aug 24 '16 at 18:38
I'll give you a hint too: http://api.jquery.com/data/#data-html5 — yezzz, Aug 24 '16 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 http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery — Tyler, Aug 24 '16 at 18:38

score 5 · Answer 1 · answered Aug 24 '16 at 18:36

5

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/

answered Aug 24 '16 at 18:36

Christoph

1,631
8
19

Thank you SO much! I've spent like 12 hours trying to get this working and couldn't even find where to start. Really, thank you so much for taking the time :) – user1996496 Aug 24 '16 at 18:39
If the answer helped you, you might want to mark the answer as accepted, so that it might be found easier by users with similar problems. – Christoph Sep 05 '16 at 11:38

MohammadReza Mahmoudi · Answer 2 · 2016-08-24T20:29:21.507

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

score 1 · Answer 3 · answered Aug 24 '16 at 18:39

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/

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

3 Answers3