个人中心
gpt4 book ai didi

javascript - Materialise CSS - 使用纯 Javascript 初始化图钉(无 JQuery)

转载 作者：行者123 更新时间：2023-11-28 02:26:31 27 4
gpt4 key购买 nike

我正在使用 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方式(见Demo源码第160行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 组件的任何帮助。

最佳答案

你应该:

  1. 删除 M.AutoInit();
  2. 分别初始化每个导航栏以设置正确的顶部和底部属性。
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

关于javascript - Materialise CSS - 使用纯 Javascript 初始化图钉(无 JQuery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53735893/

27 4 0
文章推荐： html - 悬停图像不显示
文章推荐： html - 我们如何才能在 HTML 中选择的选项标签中只显示图像？
文章推荐： javascript - 获取 HTML 表单值并提交到新窗口
文章推荐： javascript - 为什么我的 JS 代码在运行，而 DOM 操作还没有完成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com