jQuery Unobscure Text

Unobscure Text is a tiny jQuery plugin that allows you to apply a different style to text as soon as a target element scrolls into it. This is useful in cases where you have a fixed header with a transparent background, and you want the header text to remain legible when an image with the same color as the text is scrolled underneath the text.

Demo »

Getting Started

Step 1: Link the required files

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/js/jquery.unobscure.js"></script>

Step 2: Call the plugin method

Make sure this comes after the two required JavaScript files from Step 1 are loaded.

<script>
$(document).ready(function() {
  $('#menu a').unobscure({
    target: '#promos img',
    textCss: 'color:#fff'
  });
});
</script>

In the example above, #menu a will be applied the CSS color:#fff when #promos img scrolls into it.

NOTE: The element the plugin is invoked on (e.g., #menu a) should always point to the text's immediate parent.

Options

Name	Type	Default	Description
`target`	string	''	Selector to the obstruction element.
`textCss`	string	''	The style to apply to the text when `target` scrolls into it.

To change the default options, add this line once before making the first call to the plugin method:

$.fn.unobscure.defaults.textCss = 'color:#fff';

Requirements

Modern browsers, and IE 9 and above.
jQuery 2.x and below. If you need to use jQuery 3.x, then I recommend the jq-clipthru plugin instead.

Installation

Choose from one of the following methods:

git clone git@github.com:thdoan/unobscure-text.git
git clone https://github.com/thdoan/unobscure-text.git
bower install unobscure-text
npm install unobscure-text
Download ZIP

thdoan/unobscure-text