私はショッピングカートのための右サイドバーを持っています。私が直面している問題は、ブートストラップが「接辞」クラスを追加してオーバーフローが発生し、自動スクロールするitem-cont-scrollクラスを設定してもコンテンツがスクロールしなくなる場合です。私のdivが接尾辞メニューでスクロールしないのはなぜですか？
いつも終わるものコンテンツはまだ私はスクロールするオーバーフローを取得するには、その日すでにしようとされている下
に遮断し、取得している出来事は、解決策を見つけるように見えることはできません。私は
私は非常に多くの方法を試してみましたが、まだ動作しません、相対位置を、親のdivを作成し、100％に高さを設定していると私は仕事にこれを取得する方法を見つけるように見えることはできません。
下の次のリンクは、すでに私が達成しようとしているものを持っている他のウェブサイトの例です。リンクをクリックして注文を選択すると、サイドバーが固定されていることがわかります。カートに追加されている食品アイテムをカートに追加したときに表示されます。
https://www.grubhub.com/restaurant/bareburger-85-2nd-ave-new-york/266100
以下はあなたが130pxに設定されたオフセットを過ぎてスクロールしたときに気づくでしょう、私の実際のcode.Youだけの簡単な概略である、カートは
を切ってしまいます私は本当に混乱していますなぜこれが動かないのかについて。以下は私のjsのコードを自分のページとリンクフィドル
すべてのヘルプは本当に
https://jsfiddle.net/eldan88/7gyk8hm4/#&togetherjs=Iq2LrSwBUP
<style>
.categories {
border-bottom: solid 1px lightgray;
}
#item-cont-scroll{
overflow: auto;
}
header{
height: 200px;
}
.affix{
top:0;
}
</style>
</head>
<body>
<article class='container'>
<header>
Logo goes here
</header>
<div class='row'>
<div class='col-sm-8'>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
<h2 class='categories'> Test</h2>
</div>
<div class='col-sm-4'>
<section data-spy='affix' data-offset-top='130' >
<h1> Item name </h1>
<h2> Item Description </h2>
<div id='item-cont-scroll'>
<h2>Option Category 1 </h2>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<h2>Option Category 2 </h2>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<h2>Option Category 3 </h2>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
<div> Item options </div>
</div>
</section>
</div>
</div>
</article>
いただきありがとうございます。私のウィンドウのサイズを変更した場合、コンテンツは再有効化されず、途切れてしまいます。 – json1
申し訳ありませんが、私はあなたを誤解するかもしれないと思います。あなたが望むものと持っているもののスクリーンショットをアップロードしてください。 –