Sticky Code Area

Details

• This is a test of putting a code area in the middle of a page and then when you scroll it sticks to the top and the other content rolls underneath it.

EXAMPLE

This is a test

HTML Source

<pre id="codeBlock"><code>This is a test</code></pre>

CSS Source

#codeBlock {
  background-color: #000;
  position: sticky;
  top: 0px;
  z-index: 2;
}

JavaScript Source

const init = () => {
  console.log('init')
  console.log(c.alfa)
}

document.addEventListener('DOMContentLoaded', init)

JSON Data Source

{
  "note": "Example JSON data file"
}

Config JS Source

// This file can be used to represent
// and data that should be held outside
// of the main script

const c = {
  alfa: 'bravo',
}