主页 / 问题 / 1061849
Accepted
Андрей
Asked:2020-12-22 21:52:48 +0000 UTC2020-12-22 21:52:48 +0000 UTC

根据视口中的块突出显示导航

  • 772

有一页长块。在右侧导航中，当您单击某个项目时，页面会滚动到块的开头，并且导航项目将变为活动状态。如果用户将页面滚动到此块，如何使该项目也变为活动状态。考虑到块的高度不是一个选项，它们很长，分别带有延迟加载图像，滚动时，它们的高度会发生变化。

body {
  margin: 0;
  padding: 0;
}
.block1 {
  width: 100%;
  min-height: 100vh;
  background-color: aquamarine;
}
.block2 {
  width: 100%;
  min-height: 100vh;
  background-color: chocolate;
}
.block3 {
  width: 100%;
  min-height: 100vh;
  background-color: blueviolet;
}
.block4 {
  width: 100%;
  min-height: 100vh;
  background-color: cadetblue;
}
ul {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section id="b1" class="block1"></section>
    <section id="b2" class="block2"></section>
    <section id="b3" class="block3"></section>
    <section id="b4" class="block4"></section>
    <ul>
      <li><a href="#b1">block 1</a></li>
      <li><a href="#b2">block 2</a></li>
      <li><a href="#b3">block 3</a></li>
      <li><a href="#b4">block 4</a></li>
    </ul>
  </body>
</html>

javascript

1 个回答

  1. Best Answer

    在 jQuery 中

    var markOne = $('#m1');
var markTwo = $('#m2');
var markThree = $('#m3');
var markFour = $('#m4');

$(".btn").click(function() {
  $(".hidden").slideToggle()
});

var scrolled;
$(function() {
  $(window).scroll(function() {
    scrolled = $(window).scrollTop();
    var scrollMarkOne = $('#b1').offset().top;
    var scrollMarkTwo = $('#b2').offset().top;
    var scrollMarkThree = $('#b3').offset().top;
    var scrollMarkFour = $('#b4').offset().top;

    if (scrolled >= scrollMarkOne && scrolled < (scrollMarkTwo)) {
      $('ul li a').removeClass('active');
      markOne.addClass('active');
    } else if (scrolled >= scrollMarkTwo && scrolled < (scrollMarkThree)) {
      $('ul li a').removeClass('active');
      markTwo.addClass('active');
    } else if (scrolled >= scrollMarkThree && scrolled < (scrollMarkFour)) {
      $('ul li a').removeClass('active');
      markThree.addClass('active');
    } else if (scrolled >= scrollMarkFour) {
      $('ul li a').removeClass('active');
      markFour.addClass('active');
    }

  });
});
    .block1 {
  width: 100%;
  min-height: 100vh;
  background-color: aquamarine;
}

.block2 {
  width: 100%;
  min-height: 100vh;
  background-color: chocolate;
}

.block3 {
  width: 100%;
  min-height: 100vh;
  background-color: blueviolet;
}

.block4 {
  width: 100%;
  min-height: 150vh;
  background-color: cadetblue;
}

.btn {
  text-align: center;
  font-size: 50px;
  cursor: pointer;
  padding: 30px;
}

.hidden {
  display: none;
  width: 300px;
  height: 800px;
  background: #000;
}

ul {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

ul li a.active {
  color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="b1" class="block1"></section>
<section id="b2" class="block2"></section>
<section id="b3" class="block3">
  <div class="btn">Show content</div>
  <div class="hidden"></div>
</section>
<section id="b4" class="block4"></section>
<ul>
  <li><a href="#b1" id="m1">block 1</a></li>
  <li><a href="#b2" id="m2">block 2</a></li>
  <li><a href="#b3" id="m3">block 3</a></li>
  <li><a href="#b4" id="m4">block 4</a></li>
</ul>

    • 2

相关问题