conditional-breakpoint.js
Plugin aimed at reducing the overhead on a client side in the handling of scroll
and resize
events. In most cases we have to do some actions on an exact breakpoint and continue scrolling/resizing the page, but many developers forget to check that actions have been performed and repeating them on every single event occasion.
Installation
Bower
bower install conditional-breakpoint
NPM
npm install conditional-breakpoint
Usage
Let's add the sticky-header
class to the body
element as soon as scroll position will be below of 500 pixels and remove it otherwise.
windowconditionalBreakpoint;
One bad example which I'm seeing all the time:
window;
The result of two samples above will be completely the same. Customer will not see the difference. But in the first case, class to the body
will be added as soon as a page will be scrolled to 500 pixels or below and removed when scroll location will be above of this height. In the second one - the same actions will be performed every f***ing scroll. Check the demonstration and see personally.
The same technique can be used for handling the resize
event. Check it out:
windowconditionalBreakpoint;
And its bad brother:
window;