文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >添加和删除类，在滚动上应用样式

问添加和删除类，在滚动上应用样式
EN

Stack Overflow用户
提问于 2018-07-31 02:12:18
回答 4查看 162关注 0票数 10

问题

我在添加和删除类，在滚动上应用样式时遇到了问题。

具体来说，当我向下滚动页面时：

  • is-red的类仍然在第一个.dot__outer组中当您向下滚动页面时它应该被移除，应该有一个组使用is-red类
  • 高亮显示我的if语句似乎有问题，因为颜色保持其默认颜色并且不会在scroll

中更改

预期行为

滚动：

滚动时，在用户滚动经过特定面板之后，删除所有类为dot__outer

  • Add a

  • of is-red的所有div上的is-red类到系列中的下一个div。即，如果用户在面板2上，则第二组应突出显示为红色

点颜色：

  • 在黑色背景上，圆点及其边框应为白色
  • 在白色背景上，圆点及其边框应为黑色
  • 在这两种情况下，任何具有is-red类的dot__outer都应为红色

F232>

scripts.js

代码语言：javascript
复制
$(function() {

  function updateProgress() {
    let dot = $(".dot");

    let dotsBottom = $(".dots").offset().top + $(".dots").outerHeight();
    let panelHeaderBottom =$(".panel-1").offset().top + $(".panel-1").outerHeight();
    let panelRelatedTop = $(".panel-8").offset().top;

    // If the `dot__outer` has a class of `is-active` the dot should also be red. By default, the dot and border should be white.
    if (dot.parent().hasClass("is-red")) {
      $(this).css("background", "red");
    } else {

      // If the position of the dots is less than the bottom of the header or greater than the top of the related section, the dots are white. Otherwise, the dots are black
      if (dotsBottom < panelHeaderBottom || dotsBottom > panelRelatedTop) {
        $(this).css("background", "#000");

      } else {
        $(this).css("background", "#fff");
      }
    }

    $(".panel").each(function(index) {
      let currentPosition = $(window).scrollTop();
      let panelTop = $(this).offset().top;
      let panelBottom = $(this).offset().top + $(this).outerHeight();

      if ((currentPosition > panelTop) && (currentPosition < panelBottom)) {        
        $(".dot__outer").removeClass("is-red");
        $(".dot__outer").eq(index).addClass("is-red");
      } else {
        $(".dot__outer").eq(0).addClass("is-red");
      }
    });
  }

  $(window).scroll(function() {
    updateProgress();
  });
});

index.html

代码语言：javascript
复制
<div class="panels">
  <div class="panel panel-1">Panel #1</div>
  <div class="panel panel-2">Panel #2</div>
  <div class="panel panel-3">Panel #3</div>
  <div class="panel panel-4">Panel #4</div>
  <div class="panel panel-5">Panel #5</div>
  <div class="panel panel-6">Panel #6</div>
  <div class="panel panel-7">Panel #7</div>
  <div class="panel panel-8">Panel #8</div>
</div>

<div class="dots">

  <div class="dot__outer is-red">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>
</div>

Codepen

https://codepen.io/yacoubian/pen/PBOVKw?editors=1010

更新

滚动问题已修复，codpen已更新。

javascript
jquery
html
css
scroll
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-07-31 21:21:10

这是我的解决方案。这将动态检查面板位置并将其与每个点位置进行比较，然后为css样式应用一个类。

codepen：https://codepen.io/tylerfowle/pen/QBaBgO

  1. 我已经在面板上添加了light和dark类html。
  2. 在JS中，我们检测面板是否在视口中，如果它是什么类(亮或暗)。
  3. 然后循环每个.dot__outer元素，看看它们在哪个面板中，并应用正确的类。我们使用中点来确定大部分网点在哪个面板中。

​

代码语言：javascript
复制
$(function() {
  let dotClass = "dark";

  function updateProgress() {
    let viewportTop = $(window).scrollTop();
    let viewportBot = viewportTop + $(window).height();

    $(".panel").each(function(index) {
      // save the ref to the current panel for use in the dot loop
      let $this = $(this);
      let panelTop = $(this).offset().top;
      let panelBot = panelTop + $(this).outerHeight();

      // add class based on panel that is within viewport, remove from siblings
      if ((viewportTop > panelTop) && (viewportTop < panelBot)) {
        $(".dot__outer").eq(index).addClass("is-red").siblings().removeClass("is-red");
      }

      $(".dot__outer").each(function(){
        let dotTop = $(this).offset().top;
        let dotMid = dotTop + $(this).outerHeight()/2;
        let dotBot = dotTop + $(this).outerHeight();

        if ($this.hasClass("light")) {
          dotClass = "light";
        } else {
          dotClass = "dark";
        }

        if (panelTop < dotMid && panelBot > dotMid) {
          $(this).removeClass("dark light").addClass(dotClass);
        }

      });

    });
  }

  $(window).scroll(function() {
    updateProgress();
  });

});
代码语言：javascript
复制
body {
  margin: 0;
}

.panel {
  width: 100vw;
  height: 100vh;
  border-bottom: 1px solid red;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.panel.panel-1, .panel.panel-8 {
  background: #000;
  color: #fff;
}

.dots {
  position: fixed;
  bottom: 48px;
  right: 48px;
}

.dot {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
}

.dot__outer {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid white;
}
.dot__outer.light {
  border-color: black;
}
.dot__outer.light .dot {
  background: black;
}
.dot__outer.dark {
  border-color: white;
}
.dot__outer.dark .dot {
  background: white;
}
.dot__outer.is-red {
  border: 1px solid red !important;
}
.dot__outer.is-red .dot {
  background: red !important;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
  <div class="panel panel-1 dark">Panel #1</div>
  <div class="panel panel-2 light">Panel #2</div>
  <div class="panel panel-3 light">Panel #3</div>
  <div class="panel panel-4 light">Panel #4</div>
  <div class="panel panel-5 light">Panel #5</div>
  <div class="panel panel-6 light">Panel #6</div>
  <div class="panel panel-7 light">Panel #7</div>
  <div class="panel panel-8 dark">Panel #8</div>
</div>

<div class="dots">

  <div class="dot__outer is-red">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-07-31 06:21:18

这是您可以采用的另一种方法：

代码语言：javascript
复制
function updateProgress() {
    let dotsBottom = $(".dots").offset().top + $(".dots").outerHeight();
    let dotBorder = $(".dot__outer");

    let headerBottom = $(".panel-1").offset().top + $(".panel-1").outerHeight();
    let relatedTop = $(".panel-8").offset().top;

    $(".panel").each(function(index) {
        let currentPosition = $(window).scrollTop();
        let panelTop = $(this).offset().top;
        let panelBottom = $(this).offset().top + $(this).outerHeight();

        if (currentPosition > panelTop && currentPosition < panelBottom) {
            dotBorder.removeClass("is-red");
            dotBorder.eq(index).addClass("is-red").children().css("background", "red");

            if (dotsBottom < headerBottom || dotsBottom > relatedTop) {
                dotBorder.not(".is-red").children().css("background", "#fff");
            } else {
                dotBorder.not(".is-active").children().css("background", "#000");
            }
        }
    });
}
票数 1
EN

Stack Overflow用户

发布于 2018-07-31 04:05:28

我可能会用CSS解决一些问题，特别是着色部分。

这里有一个想法，我减少了JS代码，只根据一个简单的划分来添加/删除类来查找索引。

然后，我使用了一些CSS技巧来对框进行着色：

对于边框，我使用了一个不同颜色的渐变来创建第二个边框，这样根据背景的background.

  • For，只有一个边框是可见的。我使用
  • 定义了一个颜色，这是网站的反转颜色。我修复了它，并用CSS变量调整了滚动的位置。

在整个页面上运行代码片段以获得更好的体验

​

代码语言：javascript
复制
$(function() {

  function updateProgress() {
        let currentPosition = $(window).scrollTop();
        let index = Math.floor(currentPosition/$(window).height());
        
        $(".is-red").removeClass("is-red");
        $(".dot__outer").eq(index).addClass("is-red");
        $('.dot').css('--p',(-currentPosition)+'px');
  }

  $(window).scroll(function() {
    updateProgress();
  });
});
代码语言：javascript
复制
body {
  margin: 0;
}

.panel {
  height: 100vh;
  border-bottom: 1px solid red;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

.panel.panel-1,
.panel.panel-8 {
  background: #000;
  color: #fff;
}

.dots {
  position: fixed;
  top: 48px;
  right: 48px;
}

.dot {
  width: 5px;
  height: 5px;
  background: 
    linear-gradient(to bottom,
      #fff 0%,#fff 12.5%,
      #000 12.5%,#000 87.5%,
      #fff 87.5%,#fff 100%) no-repeat;
  background-size:200vw 800vh;
  background-attachment:fixed;
  background-position:0 calc(var(--p,48px) + 48px);
  border-radius: 50%;
}

.dot__outer {
  border: 1px solid #fff;
  margin-bottom: 16px;
  padding: 8px;
  box-shadow:1px 1px 0px #000,
             -1px 1px 0px #000,
             1px -1px 0px #000,
             -1px -1px 0px #000;
}

.dot__outer.is-red {
  border: 1px solid red;
  box-shadow:1px 1px 0px red,
             -1px 1px 0px red,
             1px -1px 0px red,
             -1px -1px 0px red;
}

.dot__outer.is-red .dot {
  background: red;
}
代码语言：javascript
复制
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="panels">
  <div class="panel panel-1">Panel #1</div>
  <div class="panel panel-2">Panel #2</div>
  <div class="panel panel-3">Panel #3</div>
  <div class="panel panel-4">Panel #4</div>
  <div class="panel panel-5">Panel #5</div>
  <div class="panel panel-6">Panel #6</div>
  <div class="panel panel-7">Panel #7</div>
  <div class="panel panel-8">Panel #8</div>
</div>

<div class="dots">

  <div class="dot__outer is-red">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>

  <div class="dot__outer">
    <div class="dot"></div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51599958

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档