图形不显示计算样式

Question

我有一个垂直导航栏。当客户在网站上并查看与导航栏按钮相对应的页面部分时，该按钮周围应带有白色边框。当客户将该部分留给另一部分时，该按钮周围应有边框，最后一个按钮的边框应消失。

不幸的是，只有一半有效。我不知道为什么，但是当我滚动到另一部分时，即使调试消息指出边界颜色已计算为“透明”，当最后部分的相应按钮也不会丢失其边框。

我尝试将边框的所有面设置为透明（上，下，左，右），并且尝试将样式设置为jquery。

    $(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton);
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("portfolioButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}

CSS：

@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}

HTML：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="portfolioButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我曾期望边界会从白色变为透明。但是，我得到的只是对我以前在网站上查看的部分的按钮边框的颜色没有任何更改：

运动前：https://gyazo.com/77171adefe255973709f11e305bfb030 移动后：https://gyazo.com/b121d1d33b4f5f205df1468cd936352b

运动前的来源：https://gyazo.com/92359267cf06cbe3b7c4942f04dbf9ea 运动后的来历：https://gyazo.com/7cc03865e17fc42382774747fb30052a

Github项目文件：https://github.com/TheMasteredPanda/Portfolio-Website/blob/master/src/scripts/src/navbarBorderManagement.js#L32

Answer 1

您的问题是ID之间的命名约定不一致，并且导致元素对象被混淆，因此，例如，如果要断点设置borderColor的位置，以将其重置为透明状态，则会看到重新访问页面HTMLDivElement，而不是您要定位的li。看看下面的变化，祝您周末愉快！

$(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton + 'Button');
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("projectsButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="projectsButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>