canvas.addEventListener('touchmove', sketchpad_touchMove, false);
}
}
+
+ // When the user scrolls the page, execute myFunction
+window.onscroll = function() {myFunction()};
+
+// Get the header
+var header = document.getElementById("myHeader");
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+ if (window.pageYOffset > sticky) {
+ header.classList.add("sticky");
+ } else {
+ header.classList.remove("sticky");
+ }
+}
</script>
<style>
padding: 10px;
-webkit-appearance: none;
background: #eee;
- border: 1px solid #888;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1; /* Brign to top */
+ border: 1px solid #888;
}
#img.source-image {
width: 800px;
left: 0;
z-index: -1; /* Doc working with */
}
+
+/* Style the header */
+.header {
+ padding: 10px 16px;
+ background: #555;
+ color: #f1f1f1;
+}
+
+/* Page content */
+.content {
+ padding: 16px;
+}
+
+/* The sticky class is added to the header with JS when it reaches its scroll position */
+.sticky {
+ position: fixed;
+ top: 0;
+ width: 100%
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+ padding-top: 102px;
+}
</style>
</head>
<body onload="init()">
<img class="source-image" src="Green-Party-petition.png" alt="" />
- <input type="submit" value="CLEAR FORM" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
+ <div class="header" id="myHeader">
+ <h2>Downloaded Local Electronic Petition Signature Tool</h2>
+ <input type="submit" value="CLEAR FORM" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
+ </div>
<div id="sketchpadapp">
<div class="rightside">
<canvas id="sketchpad" height="1035" width="800">
HCoop / clinton / MarylandElectronicPetitionSignature.git / commitdiff