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.
To use this template, your computer needs:
This template can be installed with the Bootstrap CLI, or downloaded and set up manually.
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.
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.
.affix {
position: fixed;
top: 1rem;
}
.affix-bottom {
position: absolute;
}