边框颜色变化类似于进度条

gijlo24d 于 2022-09-21 发布在 jQuery

关注(0)|答案(1)|浏览(156)

我试图添加边框效果，当向下滚动时会部分改变颜色。我的问题是，这段代码会完全更改边框的颜色，并且一次性更改所有边框的颜色。它需要做的是，在向下滚动页面的同时部分更改单个边框的颜色。就像一个进度条。我知道我的代码也有问题，但我不擅长jQuery。在这件事上请帮帮我。

谢谢

jQuery(window).scroll(function() {
  var scroll = jQuery(window).scrollTop();

  if (scroll >= 40 && scroll < 80) {
    jQuery(".wpb_text_column").removeClass("green");
    jQuery(".wpb_text_column").addClass("blue");
  } else if (scroll >= 80) {
    jQuery(".wpb_text_column").removeClass("blue");
    jQuery(".wpb_text_column").addClass("green");
  } else {
    jQuery(".wpb_text_column").removeClass("blue", "green");
  }
});

.wpb_text_column {
  border-left: 5px solid #2451ae!important;
  transition: border-left-color 0.9s ease;
}

.blue {
  border-left: 5px solid blue!important;
  transition: border-left-color 0.9s ease;
}

.green {
  border-left: 5px solid green!important;
  transition: border-left-color 1s ease;
}

.wpb_text_column .wpb_wrapper {
  margin-left: 20px;
}

body {
  min-height: 800px;
  transition: background-color 0.75s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpb_text_column">
  <div class="wpb_wrapper">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div class="wpb_text_column">
  <div class="wpb_wrapper">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div class="wpb_text_column">
  <div class="wpb_wrapper">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div class="wpb_text_column">
  <div class="wpb_wrapper">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

jquery

来源：https://stackoverflow.com/questions/73775306/border-color-change-like-a-progress-bar

1条答案

按热度按时间

xqkwcwgp1#

问题是，您正在检查窗口的滚动长度，并在此基础上设置所有条形图，因此当窗口滚动超过40px时，条形图会改变颜色。您要做的是设置一个for循环，这样当窗口滚动时，它将分别检查每一条到顶部的距离。

试试这个：

jQuery(window).scroll(function() {
  for (let bar of jQuery('.wpb_text_column')) {
    var scroll = jQuery(window).scrollTop() - jQuery(bar).offset().top;

    if (scroll < -40) {
      jQuery(bar).removeClass("green");
      jQuery(bar).addClass("blue");
    } else if (scroll >= -40) {
      jQuery(bar).removeClass("blue");
      jQuery(bar).addClass("green");
    } else {
      jQuery(bar).removeClass("blue", "green");
    }
  }
});

赞(0）回复(0）举报 2022-09-21

我来回答

边框颜色变化类似于进度条

1条答案

相关问题

热门标签

最新问答