Materialize CSS - 使用纯 Javascript（无 JQuery）的 Pushpin 初始化答案

【问题标题】：Materialize CSS - Pushpin init with pure Javascript (no JQuery)Materialize CSS - 使用纯 Javascript（无 JQuery）的 Pushpin 初始化
【发布时间】：2019-05-13 03:17:42
【问题描述】：

我正在使用 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方式来初始化pushpin：

$(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 DemoJQuery方式获得预期行为（见Demo源代码https://materializecss.com/docs/js/init.js第160行）：

// 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 组件的任何帮助。

【问题讨论】：

请也添加您的html
你能加个小提琴吗？
在 jsfiddle.net 上制作一个小提琴，以便我们可以使用它。
您是否也添加了图钉文档中给出的 css 样式
是的，我确实按照图钉文档@ChandraShekhar 中给出的 css 样式。

标签： javascript jquery html materialize

【解决方案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

【讨论】：