bootstrap 3.0.0に移行しています。左側に貼り付けられたメニューに問題があります:貼り付けられた直後(10pxスクロール後)に、幅が変更されます。In- このフィドル 小さくなりますが、実際のサイトでは幅が広くなり、実際のコンテンツが拡大されます。
bootstrap v2.3.2で問題なく動作しました。確認したところ、表示された.affix {position: fixed;}
でリスト項目がうまく機能しないようです。
何か案は?
解決策:最新のコメントに基づいて、固定された要素に固定幅を設定する必要なしにそれをうまく修正するこのJSピースを最後に追加しました:
$(function() {
var $affixElement = $('div[data-spy="affix"]');
$affixElement.width($affixElement.parent().width());
});
私は同じ問題を抱えており、これで修正しました:
$(window).resize(function () {
$('#category-nav.affix').width($('#content').width());
});
基本的にサイズ変更のイベントでは、コンテンツのdivの幅を計算し、添付された要素の幅をそれに設定します。
$(window).scroll(function () {
$('#secondary .widget-area.affix').width($('#secondary').width());
});
ここに別のバージョンがあります:
$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
$('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
$('.sitebar .affix').width($('.sitebar .affix-top').width());
});
これが私のバージョンです。
var fixAffixWidth = function() {
$('[data-spy="affix"]').each(function() {
$(this).width( $(this).parent().width() );
});
}
fixAffixWidth();
$(window).resize(fixAffixWidth);
CSS
div.affix {
position: fixed !important;
}
同じ問題が一度ありました(BS 2.3.2のみ)。
答えではなく、もっとa hack:貼り付けた要素に幅を与えました。私はすべての解像度(RWD)の幅を設定する必要があり、実際には値は標準の列幅(たとえば、。
はい: position: fixed
は指定されたコンテキストから要素を取り出します(あなたの場合col-md-3
)。
このコードを使用して、接辞の幅を修正します。
$(document).on('affixed.bs.affix',function(e){
$('.affix').each(function(){
var elem = $(this);
var parentPanel = $(elem).parent();
var resizeFn = function () {
var parentAffixWidth = $(parentPanel).width();
elem.width(parentAffixWidth);
};
resizeFn();
//$(window).resize(resizeFn);
});
});
接辞は彼の親の幅を取得し、ウェブをスクロールするたびにその幅を確認します。最後の行のコメントを外して、ウィンドウのサイズ変更イベントでも実行します。
$('.affix-element').width($('.affix-element-parent').width()).affix()
を使用しました
うまくいく:)
私の解決策:
$('.menu-card').affix();
$(document).on('affix.bs.affix', '.menu-card', function() {
$(this).width($(this).width());
});
(.menu-cardは私の付箋のdivです)
ウィンドウのサイズ変更をサポートするためにこれを追加しました:
接辞が親div#menu-card-paneにあると仮定しましょう。
$(window).resize(function () {
var parentSize = $('#menu-card-pane').width();
$('.affix').each(function() {
var affixPadding = $(this).innerWidth() - $(this).width();
$(this).width(parentSize - affixPadding);
});
});
これが私のHTMLです
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Committees</span>
</div>
<div id="committees-navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250">
<li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
そしてこれは私のJS修正です
$(function () {
var resize = function () {
var sidebarNav = $(".sidebar-nav");
var sidebarNavAffix = $(".sidebar-nav .affix");
if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) {
sidebarNavAffix.width(sidebarNav.width());
}
}
$(window).on({"scroll" : resize, "resize" : resize});
});