floativ

floativ is a responsive floating scroll-box at the bottom of the screen of your site that contains text, among other things, which can be displayed while browsing a web page. This floating scroll-box disappears when the user reaches an element with a specific id.

See a working demo here.

Installation

1. Download and install NodeJS
2. Clone or Download project straight from GitHub.
3. Extract the zip file and start working.

Directions

• cd into the directory and run npm install in order to install all the project dependencies.
• Open index.html to see and start working with this project.

NPM Package

You can find and install floativ from npm here.

Usage

Put this $("#floativ").floativ(); inside script tags at the bottom of your HTML file. You can also specify parameters, such as:

<div class="floativ" id="floativ">
    <div class="floativ-container">
        <div class="floativ-head">
            <span>
                <i class="fa fa-plus-circle floativ-expand" aria-hidden="true" aria-label="Expand"></i>
            </span>
            <span>
                <i class="fa fa-minus-circle floativ-collapse" aria-hidden="true" aria-label="Collapse"></i>
            </span>
        </div>
        <div class="floativ-wrapper">
            <div class="floativ-body">
                ... YOUR CONTENT HERE ...
            </div>
        </div>
    </div>
</div>

Dependencies

• jQuery
• mCustomScrollbar
• FontAwesome

Library compatibility

This library works for IE8+, Mozilla Firefox 4+, Google Chrome 11+, Opera 10+, Safari 4+.

License

GPL-3.0