返回

超详细！10 分钟实现掘金官网的目录滚动效果！

前端

如何打造掘金式的目录滚动效果：一步步详解

步骤 1：设置 HTML 结构

创建三个主要元素：

  • .container：主容器
  • .content：内容部分
  • .目录：目录部分

在 .目录 中创建链接列表，链接至相应标题。

<div class="container">
  <div class="content">
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <p>正文内容...</p>
  </div>
  <div class="目录">
    <ul>
      <li><a href="#标题-1">标题 1</a></li>
      <li><a href="#标题-2">标题 2</a></li>
      <li><a href="#标题-3">标题 3</a></li>
    </ul>
  </div>
</div>

步骤 2：应用 CSS 样式

设置主容器为 flexbox，内容部分和目录部分分别占有不同的空间。设置目录部分的样式，包括宽度、填充和背景颜色。

.container {
  display: flex;
}

.content {
  flex: 1;
}

.目录 {
  width: 200px;
  padding: 10px;
  background-color: #f5f5f5;
}

.目录 ul {
  list-style-type: none;
}

.目录 li {
  margin-bottom: 10px;
}

.目录 a {
  text-decoration: none;
  color: black;
}

.目录 a:hover {
  color: blue;
}

步骤 3：实现滚动效果

使用 jQuery 监听窗口滚动事件。在目录部分跟随页面滚动时添加 fixed 类，使其固定在屏幕顶部。

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var 目录Height = $('.目录').height();
  var 目录Top = $('.目录').offset().top;

  if (scrollTop > 目录Top) {
    $('.目录').addClass('fixed');
  } else {
    $('.目录').removeClass('fixed');
  }

  if (scrollTop + 目录Height > $(document).height()) {
    $('.目录').addClass('bottom');
  } else {
    $('.目录').removeClass('bottom');
  }
});

步骤 4：实现点击定位效果

使用 jQuery 为目录链接添加点击事件监听器。当点击链接时，滚动至相应标题的位置。

$('.目录 a').click(function(e) {
  e.preventDefault();

  var target = $(this).attr('href');
  var offset = $(target).offset().top;

  $('html, body').animate({
    scrollTop: offset
  }, 500);
});

代码示例

以下代码展示了完整的实现：

HTML

<div class="container">
  <div class="content">
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <p>正文内容...</p>
  </div>
  <div class="目录">
    <ul>
      <li><a href="#标题-1">标题 1</a></li>
      <li><a href="#标题-2">标题 2</a></li>
      <li><a href="#标题-3">标题 3</a></li>
    </ul>
  </div>
</div>

CSS

.container {
  display: flex;
}

.content {
  flex: 1;
}

.目录 {
  width: 200px;
  padding: 10px;
  background-color: #f5f5f5;
}

.目录 ul {
  list-style-type: none;
}

.目录 li {
  margin-bottom: 10px;
}

.目录 a {
  text-decoration: none;
  color: black;
}

.目录 a:hover {
  color: blue;
}

.目录.fixed {
  position: fixed;
  top: 0;
}

.目录.bottom {
  bottom: 0;
  top: auto;
}

Javascript

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var 目录Height = $('.目录').height();
  var 目录Top = $('.目录').offset().top;

  if (scrollTop > 目录Top) {
    $('.目录').addClass('fixed');
  } else {
    $('.目录').removeClass('fixed');
  }

  if (scrollTop + 目录Height > $(document).height()) {
    $('.目录').addClass('bottom');
  } else {
    $('.目录').removeClass('bottom');
  }
});

$('.目录 a').click(function(e) {
  e.preventDefault();

  var target = $(this).attr('href');
  var offset = $(target).offset().top;

  $('html, body').animate({
    scrollTop: offset
  }, 500);
});

结语

通过遵循这些步骤，您可以轻松创建掘金式目录滚动效果。该效果非常适合具有大量标题或章节的长页面。通过让用户快速轻松地浏览您的内容，它将大大改善您的网站的用户体验。

常见问题解答

  • 如何更改目录的宽度？
    您可以通过修改 CSS 中 .目录 元素的 width 属性来更改目录的宽度。
  • 如何更改目录的背景颜色？
    您可以通过修改 CSS 中 .目录 元素的 background-color 属性来更改目录的背景颜色。
  • 如何更改目录中链接的颜色？
    您可以通过修改 CSS 中 .目录 a 元素的 color 属性来更改目录中链接的颜色。
  • 如何更改目录中链接的悬停颜色？
    您可以通过修改 CSS 中 .目录 a:hover 元素的 color 属性来更改目录中链接的悬停颜色。
  • 如何更改目录跟随内容滚动的触发点？
    您可以通过修改 jQuery 中 scrollTop > 目录Top 语句中的 scrollTop 值来更改目录跟随内容滚动的触发点。