Materialise CSS - 图钉初始化为纯 Javascript（无 JQuery）

Question

我正在使用 Materializecss v1.0.0 并尝试不需要 JQuery 库，但在图钉组件上没有成功。
Codepen1 This way works (JQuery init)
Codepen2 This way doesn't work (Pure JS init)

Pushpin Help表示这种纯粹的javascript方式：

document.addEventListener('DOMContentLoaded', function() {
  var elems     = document.querySelectorAll('.pushpin');
  var instances = M.Pushpin.init(elems, options);
});

另外 Pushpin Help 表示这种 JQuery 初始化图钉的方法：

$(document).ready(function(){
  $('.pushpin').pushpin();
});

我有 4 个图钉部分（参见 cover letter）

<!DOCTYPE html>
<html>
<head>
  <title>Juan Varela - Cover Letter</title>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection"/>
  <!--Import styles.css-->
  <link type="text/css" rel="stylesheet" href="css/styles__.css"                                                                 media="screen,projection"/>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div id="divPersonal" class="block">
    <nav class="pushpin" data-target="divPersonal">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">JUAN VARELA</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>JUAN VARELA</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divSkills" class="block">
    <nav class="pushpin" data-target="divSkills">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">SKILLS</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>SKILLS</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divEducation" class="block">
    <nav class="pushpin" data-target="divEducation">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">WORK</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>WORK</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divInterests" class="block">
    <nav class="pushpin" data-target="divInterests">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">INTERESTS</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>INTERESTS</h1>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

我正在尝试使用纯 Javascript 初始化图钉，如下所示：

document.addEventListener('DOMContentLoaded', function() {
  var pushpins         = document.querySelectorAll('.pushpin');
  var instancesPushpin = M.Pushpin.init(pushpins, {
    top:    0,
    bottom: 1000,
    offset: 0
  });
});

没有成功。在第一个 100% 高度屏幕期间，只有第四部分导航栏显示固定。向下滚动并通过第一个 100% 高度的屏幕，使导航栏消失。

使用 Pushpin Demo JQuery way (see line 160 in Demo source code https://materializecss.com/docs/js/init.js 获得预期行为）：

// Pushpin Demo Init
$('.pushpin').each(function() {
  var $this = $(this);
  var $target = $('#' + $(this).attr('data-target'));
  $this.pushpin({
    top:    $target.offset().top,
    bottom: $target.offset().top + $target.outerHeight() - $this.height()
  });
});

index.js代码：

/*!
 * Site Proper Javascript (not included in materialize.js)
 * No Copyright
 * No License
 */

M.AutoInit();

document.addEventListener('DOMContentLoaded', function() {
  /* Pushpin Initialization */
  /* This way works! */
  $('.pushpin').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top:    $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
  });

  /* This way doesn't works! */
  // var pushpins         = document.querySelectorAll('.pushpin');
  // var instancesPushpin = M.Pushpin.init(pushpins, {
  //   top:    0,
  //   bottom: 1000,
  //   offset: 0
  // });
});

styles.css代码：

/*!
 * Site Proper Styles (not included in materialize.css)
 * No Copyright
 * No License
 */
html, body, .block {
  height: 100%;
}

nav ul li a:hover, nav ul li a.active {
  background-color: rgba(0,0,0,.1);
}

/* Class for when element is above threshold */
.pin-top {
  position: relative;
}

/* Class for when element is below threshold */
.pin-bottom {
  position: relative;
}

/* Class for when element is pinned */
.pinned {
  position: fixed !important;
}

在此先感谢您对使用纯 Javascript.

初始化 puspin 组件的任何帮助

Answer 1

你应该：

删除 M.AutoInit();
分别初始化每个导航栏以设置正确的顶部和底部属性。

document.addEventListener("DOMContentLoaded", function() {
  var pushpins = document.querySelectorAll(".pushpin");
  pushpins.forEach(function(element) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var elemRect = element.getBoundingClientRect();
    var parentRect = element.parentElement.getBoundingClientRect();
    var elemTop = scrollTop + elemRect.top;

    var instancePushpin = M.Pushpin.init(element, {
      top: elemTop,
      bottom: elemTop + parentRect.height - elemRect.height
    });
  })
});

example

Materialise CSS - 图钉初始化为纯 Javascript（无 JQuery）

Materialize CSS - Pushpin init with pure Javascript (no JQuery)

html

javascript

jquery

materialize