Auto Change Text CSS Rules On Scroll - jQuery Unobscure Text

File Size: 7.31 KB
Views Total: 5405
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Auto Change Text CSS Rules On Scroll - jQuery Unobscure Text

Unobscure Text is a jQuery plugin which dynamically changes the text color when you scroll the webpage to a specific position. One use-case would be to invert the link color of your sticky nav when it is scrolled down and covers an image with the same color.

See also:

How to use it:

1. Add JQuery library and the jQuery Unobscure Text plugin to the webpage.

<script src="//"></script>
<script src="dist/js/jquery.unobscure.js"></script>

2. Assume you have a sticky header navigation and some images that have the same color:

    <ul id="menu">
      <li><a href="#">Menu One</a></li>
      <li><a href="#">Menu Two</a></li>
      <li><a href="#">Menu Three</a></li>
      <li><a href="#">Menu Four</a></li>
      <li><a href="#">Menu Five</a></li>
      <li><a href="#">Menu Six</a></li>

  <img src="1.jpg" alt="Image 1">

3. Initialize the plugin to change the text color to 'white' when you scroll down the webpage to the image section:

$('#menu a').unobscure({
  target: 'section img',
  textCss: 'color: #fff;'


This awesome jQuery plugin is developed by thdoan. For more Advanced Usages, please check the demo page or visit the official website.