物化CSS-使用純Javascript的圖釘初始化（無JQuery）

Question

我正在使用Materializecss v1.0.0，並嘗試不要求在圖釘組件上沒有成功的JQuery庫。
Codepen1這種方式有效（JQuery初始化）
Codepen2這種方式行不通（純JS init）

圖釘幫助表示這種純JavaScript方式：

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

圖釘幫助還指示此JQuery初始化圖釘的方式：

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

我有4個圖釘部分（請參閱求職信）

<!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方式可以獲得預期的行為（請參見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;
}

在此先感謝您提供的使用純Java腳本初始化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
    });
  })
});

例

物化CSS-使用純Javascript的圖釘初始化（無JQuery）

問題描述

1 個解決方案

解決方案1
0 2019-04-10 15:42:02

物化CSS-使用純Javascript的圖釘初始化（無JQuery）

問題描述

1 個解決方案

解決方案1 0 2019-04-10 15:42:02

解決方案1
0 2019-04-10 15:42:02