アフィックスは関数ではありません

Question

私はBootstrap 4 Alphaを使ってWordpressサイトでしばらくの間、スティッキーサイドバーを作成しようとしていました。私はこの1つのオンラインに似た他の問題を見つけたし、ほとんどは私がこれを試みたが成功しなかったしました

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

の内のコードを置くことをお勧めします。また、私のスクリプトが呼び出されている順番を並べ替えてみましたが、どちらもうまくいきませんでした。ここで

は、私は現在

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 
}); 
}); 

を持っており、ここでエラーメッセージ

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

である基本的なブートストラップのサイドバーコードで誰もが、この問題が発生している理由を知ることが起こるのでしょうか？

おかげ

Answer 1

接辞は、ブートストラップのバージョンから4. Bootstrap 4 documentation says削除される - これは方法です 、私は同じ問題を抱えている

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

Answer 2

Affix was dropped from bootstrap v4、彼らは代わりにposition: sticky;ポリフィルを使用することをお勧めします。

Answer 3

---今それのための救済策が来る

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.

を私はそれを解決する

を使用してブートストラップ.jsバージョン3.0とそれは動作して

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

動作しない場合は、これを試してください：jqueryとブートストラップを更新してください。

<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> 

Answer 4

CSSでスティッキーポジションを使用してください。

良い例はここに見られることがあります。https://css-tricks.com/position-sticky-2/