Affix Is Not Working in Bootstrap 4 (Alpha)

Affix is not working in Bootstrap 4 (alpha)

Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code:

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    } 
});

Affix is not a function

Affix is removed from bootstrap version 4.
Bootstrap 4 documentation says--

Dropped the Affix jQuery plugin. We 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.

Now comes the remedy for it---

Take a look at it it should help you to achieve what you want

Bootstrap affix and text + logo shift

the bootstrap affix is for any element on your html you only need add the boostrap.js on your js directory and configure de top and/or bottom you need to change this element i have a example
you have a nav header

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav">

in your js file you need this line for example

$('#affix-nav').affix({
offset: {
  top: 100
}})

ok the affix is running in your html, but the nav is not change to fixed position, you need add a css for the new class added with the affix

nav.affix{
width: 100%!important;
top: 0;}

and now you can see the affix navbar in your web, you can try with this nav too

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav" data-spy="affix" data-offset-top="125">

and you don't need the js file for the affix

to play with elements on the nav check my next example

$(window).scroll(function(){
       var height = $(this).scrollTop();
       var brand = $(".navbar-brand");
       if (height > 125){
         brand.show('slow');   
       }
       else{
          brand.hide();
       }
    });

Affix as separate plugin

Yes, you can.

You can copy the plugin from Bootstrap 3. Do not forget to to declare the required CSS classes:

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

.affix-bottom {
  position: absolute;
}

Demo:

<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags always come first -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta http-equiv="x-ua-compatible" content="ie=edge">        <title> Bootstrap 4 project :: Home</title>        <!--Bootstrap CSS -->      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">    <style>      .affix {  position: fixed;  top: 1rem;}
.affix-bottom {  position: absolute;}    </style>    </head>  <body>
    <header style="height:200px;background-color:green;color:white">header</header>    <div class="container">        <div class="row">            <div class="col-md-3">            <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" style="background-color:red; height:250px;">                Affixed sidebar            </div>            </div>            <div class="col-md-9" style="height:150vh;">                Content            </div>        </div>        </div>    <footer style="height:200px;background-color:black;color:white;">footer</footer>            <!-- jQuery first, then Bootstrap JS. -->        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>        <script src="https://cdn.rawgit.com/HubSpot/tether/v1.2.0/dist/js/tether.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>       <script>     /* ======================================================================== * Bootstrap: affix.js v3.3.6 * http://getbootstrap.com/javascript/#affix * ======================================================================== * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * ======================================================================== */

+function ($) {  'use strict';
  // AFFIX CLASS DEFINITION  // ======================
  var Affix = function (element, options) {    this.options = $.extend({}, Affix.DEFAULTS, options)
    this.$target = $(this.options.target)      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
    this.$element     = $(element)    this.affixed      = null    this.unpin        = null    this.pinnedOffset = null
    this.checkPosition()  }
  Affix.VERSION  = '3.3.6'
  Affix.RESET    = 'affix affix-top affix-bottom'
  Affix.DEFAULTS = {    offset: 0,    target: window  }
  Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) {    var scrollTop    = this.$target.scrollTop()    var position     = this.$element.offset()    var targetHeight = this.$target.height()
    if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false
    if (this.affixed == 'bottom') {      if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom'      return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom'    }
    var initializing   = this.affixed == null    var colliderTop    = initializing ? scrollTop : position.top    var colliderHeight = initializing ? targetHeight : height
    if (offsetTop != null && scrollTop <= offsetTop) return 'top'    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
    return false  }
  Affix.prototype.getPinnedOffset = function () {    if (this.pinnedOffset) return this.pinnedOffset    this.$element.removeClass(Affix.RESET).addClass('affix')    var scrollTop = this.$target.scrollTop()    var position  = this.$element.offset()    return (this.pinnedOffset = position.top - scrollTop)  }
  Affix.prototype.checkPositionWithEventLoop = function () {    setTimeout($.proxy(this.checkPosition, this), 1)  }
  Affix.prototype.checkPosition = function () {    if (!this.$element.is(':visible')) return
    var height       = this.$element.height()    var offset       = this.options.offset    var offsetTop    = offset.top    var offsetBottom = offset.bottom    var scrollHeight = Math.max($(document).height(), $(document.body).height())
    if (typeof offset != 'object')         offsetBottom = offsetTop = offset    if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.$element)    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element)
    var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom)
    if (this.affixed != affix) {      if (this.unpin != null) this.$element.css('top', '')
      var affixType = 'affix' + (affix ? '-' + affix : '')      var e         = $.Event(affixType + '.bs.affix')
      this.$element.trigger(e)
      if (e.isDefaultPrevented()) return
      this.affixed = affix      this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
      this.$element        .removeClass(Affix.RESET)        .addClass(affixType)        .trigger(affixType.replace('affix', 'affixed') + '.bs.affix')    }
    if (affix == 'bottom') {      this.$element.offset({        top: scrollHeight - height - offsetBottom      })    }  }

  // AFFIX PLUGIN DEFINITION  // =======================
  function Plugin(option) {    return this.each(function () {      var $this   = $(this)      var data    = $this.data('bs.affix')      var options = typeof option == 'object' && option
      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))      if (typeof option == 'string') data[option]()    })  }
  var old = $.fn.affix
  $.fn.affix             = Plugin  $.fn.affix.Constructor = Affix

  // AFFIX NO CONFLICT  // =================
  $.fn.affix.noConflict = function () {    $.fn.affix = old    return this  }

  // AFFIX DATA-API  // ==============
  $(window).on('load', function () {    $('[data-spy="affix"]').each(function () {      var $spy = $(this)      var data = $spy.data()
      data.offset = data.offset || {}
      if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom      if (data.offsetTop    != null) data.offset.top    = data.offsetTop
      Plugin.call($spy, data)    })  })
}(jQuery);           </script>         <script>        $('[data-spy="affix"]').on('affixed.bs.affix', function () {            // from http://stackoverflow.com/questions/6551429/adjust-a-width-based-on-parent-w-jquery            $(".affix").css("width",$(".affix").parent().css("width").replace('px','') - 30);        })        </script>      </body>  </html>

Bootstrap 4 sticky navbar with subsequent section under it

Solved by adding:

.my-nav {
  //  ...
  position: fixed;
  width: 100%;
}

The issue is that sticky uses js to calculate where it is on the page, so it was always appearing before the hero-header component.

Affix Is Not Working in Bootstrap 4 (Alpha)