4

私は単純な Bootstrap モーダル セットアップを持っており、モーダルにはnavscrollspy がセットアップされたコンテンツがあります。しかし、それは機能していません。アクティベートされているように見えますが、ナビは更新されません。

完全なソースはここでは長すぎて、私が得ている効果を見ることができないので、jsfiddleをセットアップしました

メソッドを使用しdata-spy="scroll"て有効にしています。私は何を間違えましたか？ナビが自分の位置で更新されないのはなぜですか?

4

4 に答える 4

7

ブートストラップ scrollspy にはまだいくつかのバグがあります (私はブートストラップが大好きです)。これにはカスタムスクリプトを使用します。これは、よりうまく機能し、より柔軟です。

<script type="text/javascript">
$(document).ready(function(){
var lastId, topMenu = $(".menu-sidebar"),
    topMenuHeight = topMenu.outerHeight() + 150,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function() {
        var item = $($(this).attr("href"));
        if (item.length) {
            return item;
        }
    });

menuItems.click(function(e) {
    var href = $(this).attr("href"),
    topMenuHeight = topMenu.outerHeight() + 20,
        offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
});

$(window).scroll(function() {
    var fromTop = $(this).scrollTop() + topMenuHeight;

    var cur = scrollItems.map(function() {
        if ($(this).offset().top < fromTop) return this;
    });
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        menuItems.parent().removeClass("active").end().filter("[href=#" + id + "]").parent().addClass("active");
    }
});
});
</script>

ソース: http://jsfiddle.net/mekwall/up4nu/

于 2012-09-21T12:27:42.587 に答える
4

ここには 2 つの問題があると思います。

(1) scrollspy を本体以外に配置すると問題が発生します。これをチェックしてください：

Twitter Bootstrap の ScrollSpy では、正確にどこに data-spy="scroll" を配置できますか?

基本的に追加する場合：

#area-to-watch {
    height: 200px;
    overflow: auto; 
}

体以外のものを「スパイ」するためにスクロールスパイできるようになります。 http://jsfiddle.net/hajpoj/SZYKM/ これは jsfiddle の修正版です

(2) scrollspy をモデルに入れると、さらに問題が発生します。上記をモデルに入れると、ちょっとおかしくなります。私は前向きではありませんが、次のようなことをする必要があると思います

.scrollspy('refresh')

ドキュメントに記載http://twitter.github.com/bootstrap/javascript.html#scrollspy

于 2012-08-12T20:42:38.940 に答える
0

ブートストラップフォルダに、ScrollSpyに必要なすべての.jsファイルが含まれていることを確認してください

私の場合、ブートストラップフォルダー（bootstrap / js /）には次のファイルがあります。

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="bootstrap/js/bootstrap-tab.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="bootstrap/js/bootstrap-button.js"></script>
<script src="bootstrap/js/bootstrap-collapse.js"></script>
<script src="bootstrap/js/bootstrap-carousel.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>
<script src="bootstrap/js/bootstrap-affix.js"></script>

<script src="bootstrap/js/holder/holder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>

<script src="bootstrap/js/application.js"></script>
于 2013-02-25T08:37:40.607 に答える
0

モーダルが次のように表示された後、.scrollspy('refresh') を呼び出す必要があります。

 $('#myModal').on('shown.bs.modal', function (e) {
        $('.modal-body').scrollspy('refresh');
 });
于 2014-05-04T20:11:11.137 に答える