Try it on your smartphone : git.io/overflow (https://dimitrinicolas.github.io/overflow-color/)
A simple script that automatically switch CSS html background color according to scroll position.
This package is on npm
$ npm i overflow-colorYou simply must add the browser minified script dist/overflow-color.umd.min.js and the two attributes data-oc-top and data-oc-bottom to your body tag
<body data-oc-top="red" data-oc-bottom="blue">
<!-- ... -->
<script src="dist/overflow-color.umd.min.js"></script>
</body>You can use the shortcut data-oc by separating the two values with a comma
<body data-oc="red,blue">You can import this package with a simple require or import
require('overflow-color');
// with ES6+
import overflowColor from 'overflow-color';You don't have anything else to do, the script is automatically launched.
This library will wrap all the body content inside a <div data-oc-wrap>.
Then it set to the wrapper the same background as the body, and set body's background to transparent.
when the document is loaded:
<head>
<!-- ... -->
<style>
/* your style */
body {
background: lightgrey;
}
</style>
<style>
/* style added by the script */
html { background: blue; }
</style>
</head>
<body data-oc-top="red" data-oc-bottom="blue" style="background: transparent;">
<div data-oc-wrap style="background: lightgrey;">
<!-- ... -->
<script src="overflow-color.umd.min.js"></script>
</div>
</body>Minify script
$ npm run build