如何使当前 div 部分的名称显示在另一个 div 中？答案

【问题标题】：How do I make the current div section's name show in another div?如何使当前 div 部分的名称显示在另一个 div 中？
【发布时间】：2016-08-25 04:29:21
【问题描述】：

我的页面上有不同的部分，如下所示：

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

还有一个像这样的单独 div：

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

那个 div 总是在页面的顶部。如何做到这一点，以便当用户滚动到 blue（或任何其他）div 时，current_div 将更改为：

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

这是我的标记：https://jsfiddle.net/wb7L954v/1/

必须有一种简单的方法来获取 data-section 部分并将其简单地放入该 div 中？

【问题讨论】：

这看起来你根本没有研究过。在询问之前，您应该搜索。不过我会给你一个hint
我确实搜索过，但我不知道它会叫什么。我花了大约 12 个小时搜索（不是开玩笑）。我发现最接近的是 Bootstrap 样式菜单，它突出显示了您所在的当前部分，但不幸的是，这并没有帮助我从 div 中获取“数据部分”部分。在写到这里之前，我已经用尽了几乎所有的选项，相信我:)
感谢this jsfiddle.net/U4qyp/32
我也给你个提示：api.jquery.com/data/#data-html5
你想要滚动，并且根据页面中的位置发生一些事情......所以你想用谷歌搜索关于滚动条的东西。这可能会导致类似stackoverflow.com/questions/17441065/…

标签： javascript jquery html css

【解决方案1】：

步骤：

获取所有具有data-section 属性的元素
在scroll事件做
- 遍历所有元素（从最后一个开始）
- 如果当前的scrollTop 大于该元素的offsetTop，那就是我们正在寻找的元素
- 将该元素的data-section 属性值写入相应的标题元素中

见：https://jsfiddle.net/Leydfd5b/

【讨论】：

非常感谢！我花了大约 12 个小时试图让这个工作，甚至找不到从哪里开始。真的，非常感谢您抽出宝贵的时间:)
如果答案对您有帮助，您可能希望将答案标记为已接受，以便有类似问题的用户更容易找到它。

【解决方案2】：

这是一个适用于每个滚动方向的示例。

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（用于测试）：

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

工作示例：https://jsfiddle.net/1aakar8s/1/

如果你需要上下滚动，那么你可以使用这个 jQuery 代码：

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

【讨论】：

【解决方案3】：

您需要将每个彩色部分的偏移顶部与主 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");
});

例如：https://jsfiddle.net/DinoMyte/wb7L954v/2/

【讨论】：