bootstrap-affix

Bootstrap 4 with jQuery Affix plugin. Powered by Panini, Sass and Gulp.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
bootstrap-affix
1.0.16 years ago6 years agoMinified + gzip package size for bootstrap-affix in KB

Readme

Bootstrap 4 with Affix plugin
Bootstrap 4 drops the Affix jQuery plugin. They recommend using a position: sticky polyfill instead. See the HTML5 Please entry for details and specific polyfill recommendations. If you were using Affix to apply additional, non-position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.
Alternatively this template will show you how to use the Bootstrap 3 plugin with Bootstrap 4.
Bootstrap 4 with jQuery Affix plugin. It includes a Sass compiler and a set of Panini HTML templates for you. Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.

Installation

To use this template, your computer needs:

This template can be installed with the Bootstrap CLI, or downloaded and set up manually.

Using the CLI

Install the Bootstrap CLI with this command:
[sudo] npm install -g gulp bower
npm install bootstrap-cli --global

Use this command to set up an empty Bootstrap 4 project:
bootstrap new --template affix

The CLI will prompt you to give your project a name. The code will be downloaded into a folder with this name.
Or install the Bootstrap 3.3.7 affix sources with this command:
[sudo] npm install bootstrap-affix --save

Use this command to set up an empty Bootstrap 4 project:
bootstrap new --template affix

The CLI will prompt you to give your project a name. The code will be downloaded into a folder with this name.

Manual Setup

To manually set up the project, first download it with Git:
git clone https://github.com/bassjobsen/empty-bootstrap-project-gulp projectname

Then open the folder in your command line, and install the needed dependencies:
cd projectname
npm install
bower install

Finally, run npm start to run the Sass and HTML template compiler. They will re-run every time you save a Sass or HTML temaplate file.

Do not forget to to declare the required CSS classes:

.affix {
  position: fixed;
  top: 1rem;
}

.affix-bottom {
  position: absolute;
}