I'm using Materializecss v1.0.0 and trying to not require JQuery library with no sucess on pushpin component.
Codepen1 This way works (JQuery init)
Codepen2 This way doesn't work (Pure JS init)
Pushpin Help indicates this pure javascript way:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.pushpin');
var instances = M.Pushpin.init(elems, options);
});
Also Pushpin Help indicates this JQuery way to init pushpin:
$(document).ready(function(){
$('.pushpin').pushpin();
});
I have 4 pushpin sections (see 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>
I'm trying to init pushpin with pure Javascript like this:
document.addEventListener('DOMContentLoaded', function() {
var pushpins = document.querySelectorAll('.pushpin');
var instancesPushpin = M.Pushpin.init(pushpins, {
top: 0,
bottom: 1000,
offset: 0
});
});
No success. Only fourth section navbar is showed fixed during first 100% height screen. Scrolling down and passing firts 100% height screen, make the navbar dissapear.
Expected behavior is obtained using 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 code:
/*!
* 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 code:
/*!
* 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;
}
Thanks in advance for any help to init puspin component with pure Javascript.
You should:
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
});
})
});