动态改变弹性容器子元素的顺序

Question

我有一个导航菜单和一些部分。每当滚动到特定部分时，相应的导航元素就会通过我制作的 jQuery 函数获得 .active-class。

我还想做的是将导航菜单的活动子元素“推”到菜单的前面，同时将最后一个活动元素“推”到菜单的后面。请参阅下面的图片进行说明：

我现在拥有的

我想要的

如您所见，item 2 元素是菜单的第一个元素，而 item 1 元素是菜单的最后一个元素。

我试过的

container-元素有 display: flex;-属性，所以我很自然地尝试在我的函数中的不同导航元素上使用 order-属性，但是还没有取得任何成功。如果有人对如何实现这一目标有一些建议，我将不胜感激，因为坦率地说，我不知道从哪里开始。

Codepen: https://codepen.io/sigurdmazanti/pen/xxpBxNR

片段：

var nav = $(".container");
var sections = $(".section");

$(window).on("scroll", function() {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top,
      bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find(".nav").removeClass("active");
      nav.find("." + $(this)[0].id).addClass("active");
    }
  });
});

.container {
  display: flex;
  gap: 30px;
  position: sticky;
  justify-content: center;
  top: 0;
}

.container .nav {
  border: 1px solid black;
}

div.active {
  background-color: black;
  color: white;
}

.section {
  height: 350px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.one {
  background-color: yellow;
}

.section.two {
  background-color: red;
}

.section.three {
  background-color: green;
}

.section.four {
  background-color: blue;
}

.section.five {
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="nav one">item 1</div>
  <div class="nav two">item 2</div>
  <div class="nav three">item 3</div>
  <div class="nav four">item 4</div>
  <div class="nav five">item 5</div>
</div>

<div class="section one" id="one">item 1</div>
<div class="section two" id="two">item 2</div>
<div class="section three" id="three">item 3</div>
<div class="section four" id="four">item 4</div>
<div class="section five" id="five">item 5</div>

Answer 1

在 phone 上现在很难编辑，但请查看 css 中的顺序。只需更改脚本中的顺序样式即可。

不清楚你是否想让它动画化。一个常见的技巧是复制整行然后将它放在 div 中而不溢出。然后在滚动到上一个或下一个时会快速停止栏以模仿无休止的滚动..

var nav = $(".container");
var sections = $(".section");

$(window).on("scroll", function() {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top,
      bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find(".nav").removeClass("active");
      nav.find("." + $(this)[0].id).addClass("active");
    }
  });
});

.container {
  display: flex;
  gap: 30px;
  position: sticky;
  justify-content: center;
  top: 0;
}

.container .nav {
  border: 1px solid black;
}

div.active {
  background-color: black;
  color: white;
}

.section {
  height: 350px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.one {
  background-color: yellow;
}

.section.two {
  background-color: red;
}

.section.three {
  background-color: green;
}

.section.four {
  background-color: blue;
}

.section.five {
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div style="order:3" class="nav one">item 1</div>
  <div class="nav two">item 2</div>
  <div style="order:1" class="nav three">item 3</div>
  <div class="nav four">item 4</div>
  <div class="nav five">item 5</div>
</div>

<div class="section one" id="one">item 1</div>
<div class="section two" id="two">item 2</div>
<div class="section three" id="three">item 3</div>
<div class="section four" id="four">item 4</div>
<div class="section five" id="five">item 5</div>

Answer 2

这应该很适合你：

.container > .nav.active {
  order: -1;
}

看到它在这里工作：

var nav = $(".container");
var sections = $(".section");

$(window).on("scroll", function() {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top,
      bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find(".nav").removeClass("active");
      nav.find("." + $(this)[0].id).addClass("active");
    }
  });
});

.container {
  display: flex;
  gap: 30px;
  position: sticky;
  justify-content: center;
  top: 0;
}

.container .nav {
  border: 1px solid black;
}

div.active {
  background-color: black;
  color: white;
}

.section {
  height: 350px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.one {
  background-color: yellow;
}

.section.two {
  background-color: red;
}

.section.three {
  background-color: green;
}

.section.four {
  background-color: blue;
}

.section.five {
  background-color: purple;
}

.container > .nav.active {
  order: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="nav one">item 1</div>
  <div class="nav two">item 2</div>
  <div class="nav three">item 3</div>
  <div class="nav four">item 4</div>
  <div class="nav five">item 5</div>
</div>

<div class="section one" id="one">item 1</div>
<div class="section two" id="two">item 2</div>
<div class="section three" id="three">item 3</div>
<div class="section four" id="four">item 4</div>
<div class="section five" id="five">item 5</div>

动态改变弹性容器子元素的顺序

Changing the order of a flex-container's child elements dynamically

html

javascript

css

jquery

flexbox

我现在拥有的

我想要的

我试过的