I am using MaterializeCSS v1.0.0 without requiring JQuery with failures for the pushpin component.
Codepen1 It works! (JQuery init)
Codepen2 Not working (Pure JS init)
The Pushpin Help indicates this initialization with pure Javascript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.pushpin');
var instances = M.Pushpin.init(elems, options);
});
Also, the Pushpin help indicates this initialization with JQuery:
$(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 try to initiate 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
});
});
Not successful. Only the navbar of the fourth section anchored during the first 100% of height is shown. When you scroll down and pass the first screen height, the navbar disappears.
The desired behavior is obtained by using the JQuery initialization of the Pushpin Demo (see line 160 in Demo source code < a href="https://materializecss.com/docs/js/init.js"> link ):
// 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 your help to initialize the puspin component with pure Javascript.