.sticky-header th { position: sticky; top: 0; background-color: #00423C; /* Set the background color as needed */ color: white; /* Set the text color as needed */ z-index: 100; }nav { position: sticky; top: 0; } <!-- https://www.w3schools.com/howto/howto_js_sticky_header.asp --> <style> .sticky { position: fixed; top: 0; width: 100%; } .sticky + .content { padding-top: 102px; } </style> <script> window.onscroll = function() {myFunction()}; var desktopHeader = document.getElementById("yourHeader"); var stickyHeader = desktopHeader.offsetTop; function myFunction() { if(window.pageYOffset > stickyHeader) { desktopHeader.classList.add("sticky"); } else { desktopHeader.classList.remove("sticky"); } } </script>.my-sticky-header { position: sticky; top: 0; }const canvas = document.getElementById("signatureCanvas"); const context = canvas.getContext("2d"); const clearButton = document.getElementById("clearButton"); let isDrawing = false; canvas.addEventListener("mousedown", startDrawing); canvas.addEventListener("touchstart", startDrawing); canvas.addEventListener("mousemove", draw); canvas.addEventListener("touchmove", draw); canvas.addEventListener("mouseup", stopDrawing); canvas.addEventListener("touchend", stopDrawing); clearButton.addEventListener("click", clearSignature); function startDrawing(event) { isDrawing = true; draw(event); } function draw(event) { if (!isDrawing) return; const x = event.type === "touchmove" ? event.touches[0].clientX - canvas.offsetLeft : event.clientX - canvas.offsetLeft; const y = event.type === "touchmove" ? event.touches[0].clientY - canvas.offsetTop : event.clientY - canvas.offsetTop; context.lineWidth = 2; context.lineCap = "round"; context.strokeStyle = "#000"; context.lineTo(x, y); context.stroke(); context.beginPath(); context.moveTo(x, y); } function stopDrawing() { isDrawing = false; context.beginPath(); } function clearSignature() { context.clearRect(0, 0, canvas.width, canvas.height); }const canvas = document.getElementById("signatureCanvas"); const context = canvas.getContext("2d"); const clearButton = document.getElementById("clearButton"); let isDrawing = false; canvas.addEventListener("mousedown", startDrawing); canvas.addEventListener("touchstart", startDrawing); canvas.addEventListener("mousemove", draw); canvas.addEventListener("touchmove", draw); canvas.addEventListener("mouseup", stopDrawing); canvas.addEventListener("touchend", stopDrawing); clearButton.addEventListener("click", clearSignature); function startDrawing(event) { isDrawing = true; draw(event); } function draw(event) { if (!isDrawing) return; const x = event.type === "touchmove" ? event.touches[0].clientX - canvas.offsetLeft : event.clientX - canvas.offsetLeft; const y = event.type === "touchmove" ? event.touches[0].clientY - canvas.offsetTop : event.clientY - canvas.offsetTop; context.lineWidth = 2; context.lineCap = "round"; context.strokeStyle = "#000"; context.lineTo(x, y); context.stroke(); context.beginPath(); context.moveTo(x, y); } function stopDrawing() { isDrawing = false; context.beginPath(); } function clearSignature() { context.clearRect(0, 0, canvas.width, canvas.height); }