使用纯Javascript(无JQuery)实现CSS-Pushpin init的实质化

我使用的是Materializecss v1.0.0，并试图不需要JQuery库，但在pushpin组件上没有成功
Codepen1这种方式有效(JQuery init(
Codepen2这种方式无效(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个图钉部分(见求职信(

<!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初始化pushpin，如下所示：

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

您应该：

删除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
});
})
});

示例

相关内容

最新更新

热门标签：