Skip to content

Instantly share code, notes, and snippets.

@rahilwazir
Created November 18, 2017 17:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rahilwazir/b591090aa31e25b180f8b1f79fb41e16 to your computer and use it in GitHub Desktop.
Save rahilwazir/b591090aa31e25b180f8b1f79fb41e16 to your computer and use it in GitHub Desktop.
Focused Line for readers
(() => {
'use strict';
const height = 20;
const body = document.querySelector('body');
const focusedLine = document.createElement('div');
focusedLine.setAttribute('id', 'focused-line');
body.appendChild(focusedLine);
focusedLine.style.cssText = `position: absolute; width: 100%; background-color: rgba(230, 228, 63, 0.5); height: ${height}px; z-index: -1; display: none;`;
document.addEventListener('click', changePosition);
function changePosition(e) {
let y = e.clientY;
y -= parseInt(height) / 2;
focusedLine.style.display = '';
focusedLine.style.top = `${y}px`;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment