在 div 中滚动部分时将活动类添加到菜单 li

Question

在下面的一组代码中，基于选择左侧的 .help-menu 元素 .help-descr div 导航到特定部分。 同样，在滚动 .help-descr div 时，我想将活动类选择添加到适当的 .help-menu 元素中

这是我尝试过的：

它类似于附加链接Add Menu Active Class when scrolling to div 我无法在这里复制相同的方法

help.js

// on load of page
$(function() {
  $('.backend-feature li :first').addClass('active');
  $('.backend-head').addClass('active');
  $('.selected-item').empty();
  $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});

//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
  $('.frontend-head').removeClass('active');
  $('.frontother-head').removeClass('active');
  $('.frontend-feature li').find('a').removeClass('active');
  $('.front-otherfeature-li').find('a').removeClass('active');
  $(this).siblings().find('a').removeClass('active');
  $('.backend-head').addClass('active');
  $(this).find('a').addClass('active');
  $('.selected-item').empty();
  $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});

// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
  $('.backend-head').removeClass('active');
  $('.frontother-head').removeClass('active');
  $('.backend-feature li').find('a').removeClass('active');
  $('.front-otherfeature-li').find('a').removeClass('active');
  $(this).siblings().find('a').removeClass('active');
  $('.frontend-head').addClass('active');
  $(this).find('a').addClass('active');
  $('.selected-item').empty();
  $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});

//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
  $('.backend-head').removeClass('active');
  $('.backend-feature li').find('a').removeClass('active');
  $('.frontend-feature-li').find('a').removeClass('active');
  $(this).siblings().find('a').removeClass('active');
  $('.frontend-head').addClass('active');
  $('.frontother-head').addClass('active');
  $(this).find('a').addClass('active');
  $('.selected-item').empty();
  $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});

.ion-help-circled {
  cursor: pointer;
}

.help-row {
  flex-wrap: nowrap;
  max-width: 100%;
}

.help-menu {
  background-color: #efefef;
  overflow: auto;
  padding: 15px;
  height: 85vh;
}

.help-descr {
  position: relative;
  background-color: white;
  padding: 25px 25px;
  overflow: auto;
  height: calc(100vh - 107px);
  border: 1px solid #efefef;
}

.help-menu ul .front-otherfeature-li {
  margin-left: 18px;
}

.help-menu ul li {
  list-style-type: none;
  margin: 8px;
}

.help-menu ul .backend-head,
.help-menu ul .frontend-head {
  margin-left: 0px;
}

.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
  padding: 0;
  text-decoration: none;
  color: black;
}

.help-menu li .active {
  font-weight: bold;
}

.help-menu a:hover {
  font-weight: bold;
}

.main-section {
  background-color: white;
}

section {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

article {
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}

.main-section ul>li {
  margin-top: 6px;
}

.main-section p {
  margin-bottom: 0px;
}

.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
  margin-right: 6px;
  cursor: pointer;
}

.selected-item span {
  padding: 6px;
}

.descr-seclevel {
  list-style-type: square;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
  <link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/style.css">
  <link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="./vendors/css/ionicons.min.css">
  <script defer src="./js/help_page.js"></script>
  <title>Revive</title>
</head>

<body>
  <div id="header">
    <div class="dashboard-header">
      <div class="dashboard-left-header">
        <ul style="margin-bottom: 0px;">
          <li>
            <a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row help-row">
    <div class="col-sm-3 help-menu">
      <ul>
        <li style="font-weight: bold;">Supported Features</li>
        <li>
          <ul>
            <li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
            <li>
              <ul class="backend-feature">
                <li class="backend-feature-li"><a href="#datasource" id="backend-first">Datasources</a></li>
                <li class="backend-feature-li"><a href="#joins">Joins</a></li>
              </ul>
            </li>
            <li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
            <li>
              <ul class="frontend-feature">
                <li class="frontend-feature-li"><a href="#properties">Properties</a></li>
                <li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
                <li>
                  <ul class="frontend-otherfeature">
                    <li class="front-otherfeature-li"><a href="#actions">Actions</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-sm-9 help-descr">
      <div class='selected-item'></div>
      <section class="main-section" id="datasource">
        <header>
          <h1>Datasources</h1>
        </header>
        <article>
          <p>The supported Datasources:</p>
          <ul class="descr-firstlevel" style="margin-left: 20px;">
            <li>Excel</li>
            <li>Csv</li>
            <li>Oracle Database</li>
            <li>MSSQL server</li>
            <li>PostgreSQL</li>
            <li>MySQL</li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="joins">
        <header>
          <h1>Joins</h1>
        </header>
        <article>
          <p>The supported Joins:</p>
          <ul class="descr-firstlevel" style="margin-left: 20px;">
            <li>Inner Join</li>
            <li>Left Join</li>
            <li>Right Join</li>
            <li>Full Outer Join</li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="properties">
        <header>
          <h1>Properties</h1>
        </header>
        <article>
          <p>The supported Properties:</p>
          <ul class="descr-firstlevel" style="margin-left: 20px;">
            <li>Titles on charts</li>
            <li>X-axis and Y-axis Titles will be renamed</li>
            <li>Text Properties like font style ,size and color</li>
            <li>Background color</li>
            <li>Grid lines</li>
            <li>Borders for charts</li>
            <li>Alias name for values</li>
            <li>Legends will be enabled only if present</li>
            <li>Color of Chart:</li>
            <ul class="descr-seclevel" style="margin-left: 20px;">
              <li>If color is applied it will be added else default color is applied</li>
              <li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
            </ul>
          </ul>
        </article>
      </section>
      <section class="main-section" id="actions">
        <header>
          <h1>Actions</h1>
        </header>
        <article>
          <p>Actions supported:</p>
          <ul class="descr-firstlevel" style="margin-left: 20px;">
            <li>Only on-select is supported</li>
            <li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
          </ul>
        </article>
      </section>

    </div>
  </div>
</body>

</html>

Answer 1

如果您在每个主要部分放置一个 IntersectionObserver，系统会在它进入视野或离开视野时告诉您。

然后您可以从菜单中的相关链接中添加或删除活动类。

这个 sn-p 给出了一个演示，但是它必须缩短菜单区域的总长度，这样我们才能看到下面的内容，它也修复了它，否则它会向上滚动并且添加活动类的效果无法'不会被视为菜单项已离开屏幕。

为了清楚显示哪些部分在视图中，已在链接上放置了石灰背景。

请注意，对于“活动”的实际含义，需要进行一些思考，因为一次可以在视口中出现多个部分。这个 sn-p 并没有试图解决这个问题 - 它超出了这个问题的范围。

sn-p 需要全页查看。

const callback = (entries, observer) => {
  entries.forEach(entry => {
    const id = entry.target.id;
    const el = document.body.querySelector('[href="#' + id + '"]');
    if (entry.isIntersecting) {
      el.classList.add('active');
    } else {
      el.classList.remove('active');
    }
  });
};
const sections = document.querySelectorAll('.main-section');
const options = {
  threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
  observer.observe(section);
});

.ion-help-circled {
  cursor: pointer;
}

.help-row {
  flex-wrap: nowrap;
  max-width: 100%;
}

.help-menu {
  background-color: #efefef;
  overflow: auto;
  padding: 15px;
  height: 85vh;
  height: 30vh;
  /* changed for demo so we can see stuff */
}

.help-descr {
  position: relative;
  background-color: white;
  padding: 25px 25px;
  overflow: auto;
  height: calc(100vh - 107px);
  border: 1px solid #efefef;
}

.help-menu ul .front-otherfeature-li {
  margin-left: 18px;
}

.help-menu ul li {
  list-style-type: none;
  margin: 8px;
}

.help-menu ul .backend-head,
.help-menu ul .frontend-head {
  margin-left: 0px;
}

.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
  padding: 0;
  text-decoration: none;
  color: black;
}

.help-menu li .active {
  font-weight: bold;
  background-color: lime;
  /* ADDED JUST FOR DEMO */
}

.help-menu a:hover {
  font-weight: bold;
}

.main-section {
  background-color: white;
}

section {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

article {
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}

.main-section ul>li {
  margin-top: 6px;
}

.main-section p {
  margin-bottom: 0px;
}

.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
  margin-right: 6px;
  cursor: pointer;
}

.selected-item span {
  padding: 6px;
}

.descr-seclevel {
  list-style-type: square;
}

<div style="position: fixed; z-index: 1;">
  <!-- added just for demo -->
  <div id="header">
    <div class="dashboard-header">
      <div class="dashboard-left-header">
        <ul style="margin-bottom: 0px;">
          <li>
            <a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row help-row">
    <div class="col-sm-3 help-menu">
      <ul>
        <li style="font-weight: bold;">Supported Features</li>
        <li>
          <ul>
            <li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
            <li>
              <ul class="backend-feature">
                <li class="backend-feature-li"><a href="#datasource" id="backend-first">Datasources</a></li>
                <li class="backend-feature-li"><a href="#joins">Joins</a></li>
              </ul>
            </li>
            <li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
            <li>
              <ul class="frontend-feature">
                <li class="frontend-feature-li"><a href="#properties">Properties</a></li>
                <li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
                <li>
                  <ul class="frontend-otherfeature">
                    <li class="front-otherfeature-li"><a href="#actions">Actions</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <!--ADDED -->
  <div class="col-sm-9 help-descr">
    <div class='selected-item'></div>
    <section class="main-section" id="datasource">
      <header>
        <h1>Datasources</h1>
      </header>
      <article>
        <p>The supported Datasources:</p>
        <ul class="descr-firstlevel" style="margin-left: 20px;">
          <li>Excel</li>
          <li>Csv</li>
          <li>Oracle Database</li>
          <li>MSSQL server</li>
          <li>PostgreSQL</li>
          <li>MySQL</li>
        </ul>
      </article>
    </section>
    <section class="main-section" id="joins">
      <header>
        <h1>Joins</h1>
      </header>
      <article>
        <p>The supported Joins:</p>
        <ul class="descr-firstlevel" style="margin-left: 20px;">
          <li>Inner Join</li>
          <li>Left Join</li>
          <li>Right Join</li>
          <li>Full Outer Join</li>
        </ul>
      </article>
    </section>
    <section class="main-section" id="properties">
      <header>
        <h1>Properties</h1>
      </header>
      <article>
        <p>The supported Properties:</p>
        <ul class="descr-firstlevel" style="margin-left: 20px;">
          <li>Titles on charts</li>
          <li>X-axis and Y-axis Titles will be renamed</li>
          <li>Text Properties like font style ,size and color</li>
          <li>Background color</li>
          <li>Grid lines</li>
          <li>Borders for charts</li>
          <li>Alias name for values</li>
          <li>Legends will be enabled only if present</li>
          <li>Color of Chart:</li>
          <ul class="descr-seclevel" style="margin-left: 20px;">
            <li>If color is applied it will be added else default color is applied</li>
            <li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
          </ul>
        </ul>
      </article>
    </section>
    <section class="main-section" id="actions">
      <header>
        <h1>Actions</h1>
      </header>
      <article>
        <p>Actions supported:</p>
        <ul class="descr-firstlevel" style="margin-left: 20px;">
          <li>Only on-select is supported</li>
          <li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
        </ul>
      </article>
    </section>

  </div>
</div>