Affix is not a function

问题:

I've been trying to create a sticky sidebar for a while on my Wordpress site with Bootstrap 4 Alpha. I've found other issues similar to this one online and most suggest putting the code inside of

jQuery(document).ready(function($){
});

I've tried this but was not successful. I've also tried rearranging the order of how my scripts are being called and that hasn't worked either.

Here is the basic Bootstrap sidebar code that I currently have

jQuery(document).ready(function($){
$('#sidebar').affix({
      offset: {
        top: 245
      }
});

var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
    target: '#leftCol',
    offset: navHeight
});
});

And here is the error message

Uncaught TypeError: $(...).affix is not a function

Would anyone happen to know why this issue is occurring?

Thanks

回答1:

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

回答2:

Affix was dropped from bootstrap v4, and they recommend using position: sticky; polyfill instead.

回答3:

Use sticky position with css.

Good example may seen here: https://css-tricks.com/position-sticky-2/

回答4:

I have same problem, This is way I solve it

use bootstrap.js version 3.0 and it working

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

if it not work? try this: update jquery and bootstrap

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>