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.
- Download and install NodeJS
- Clone or Download project straight from GitHub.
- Extract the zip file and start working.
- 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.
You can find and install floativ from npm here.
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>
This library works for IE8+, Mozilla Firefox 4+, Google Chrome 11+, Opera 10+, Safari 4+.