How to make the current div section name in another div?

Question

I have different sections on my page:

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

This div is always at the top of the page. How to make it so that when the user scrolls through the div blue (or whatever), the current_div will change to this:

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

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

Should there be an easy way to get the data-section and just put it inside the div?

Answer 1

Stages:

• get all elements with data-section attribute
• on scroll event do
  • iterate over all elements (starting from the last)
  • if the current scrollTop larger than this offsetTop element, then the element we are looking for
  • write this value of the data-section attribute of the element in the corresponding header element

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

Answer 2

This is an example that works for each scroll 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 to scroll up and down 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 top of the offset of each color 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/