javascript - How do I make the current div section's name show in another div? - Stack Overflow

admin管理员组

文章数量:1435859

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

Share Improve this question Follow edited Aug 24, 2016 at 18:37 theplau asked Aug 24, 2016 at 18:29 theplautheplau 99022 gold badges1010 silver badges2626 bronze badges 5

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/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/

本文标签： javascriptHow do I make the current div section39s name show in another divStack Overflow