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.

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:

  • breakPoint: the class where we hide the floating box
  • height: the starting height of the box
  • width: the starting width of the box
  • offsetPercentage: specifies extra offset to where we hide the floating box
  • heightExpand: the expand height
  • widthExpand: the expand width
  • animate: the expand-collapse animation
  • customClass: add extra classes to parent element
  • scrollbar: see mCustomScrollbar for more information

The floating box requires the following html markup in order to work

                            

<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>

Library compatibility

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