動態改變彈性容器子元素的順序

我有一個導航選單和一些部分。每當滾動到特定部分時，都會.active通過我制作的 jQuery 函式為相應的導航元素賦予 -class。

我還想做的是將導航選單的活動子元素“推”到選單的前面，同時將最后一個活動元素“推”到選單的后面。請參閱下面的圖片進行說明：

我現在擁有的

我想要的是

如您所見，item 2-element 是選單的第一個元素，而item 1-element 是選單的最后一個元素。

我試過的

-elementcontainer具有display: flex;-property，所??以我很自然地嘗試order在我的函式中的不同導航元素上使用 -properties，但沒有取得任何成功。如果有人對如何實作這一點有一些建議，我將不勝感激，因為坦率地說，我不知道從哪里開始。

代碼筆： 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>

uj5u.com熱心網友回復：

這應該很適合你：

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

uj5u.com熱心網友回復：

現在在手機上很難編輯，但看看 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>

標籤：javascript html jQuery css 弹性盒

上一篇：在ggplot的圖例標題中添加CSS樣式

下一篇：為什么我的表頭沒有留在原位