0

ユーザーがスクロールを開始すると、Twitter ブートストラップ スクロール スパイに問題が発生します。ナビゲーションは、div の途中に到達するまで、どのセクションにあるかを示すように変更されません。次に、パス アイテム 4 をスキップして、最後のアイテムに直行します。これがその例です：http://jsfiddle.net/eoboite/kjvAa/38/

私は何を間違っていますか？助けてください

HTML:

<body data-spy="scroll">
    <div class="header">
        <div class="center-container"></div>
    </div>
    <div class="nav-container">
        <div class="center-container">
            <ul class="nav main-nav" id="nav-bar">
                <li class="active"><a href="#item1">Item 1</a>

                </li>
                <li><a href="#item2">Item 2</a>

                </li>
                <li><a href="#item3">Item 3</a>

                </li>
                <li><a href="#item4">Item 4</a>

                </li>
                <li><a href="#item5">Item 5</a>

                </li>
            </ul>
        </div>
    </div>
    <div>
        <div class="sectional add-room" id="item1">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 1</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item1-->
        <hr />
        <div class="sectional add-room" id="item2">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 2</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item2-->
        <hr />
        <div class="sectional add-room" id="item3">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 3</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item3-->
        <hr />
        <div class="sectional add-room" id="item4">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 4</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item14-->
        <hr />
        <div class="sectional add-room" id="item5">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 5</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item5-->
        <!--Include js-->
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
        <script>
            console.log('starting scroll spy');
            $('.nav-container').affix({
                off: {
                    top: 100
                },
            });
            console.log('done');
        </script>
</body>

CSS:

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
 .center-container {
    margin:0 auto;
    width: 960px;
    border:1px solid red;
    overflow:hidden;
}
.header {
    background:red;
    padding: 30px 50px;
    overflow:hidden;
}
.nav-container {
    background: #0e1317;
    overflow:hidden;
    left:0;
    margin-bottom:0;
    right:0;
    z-index:1030;
}
.active {
    background:#075f81;
}
.nav-container.affix {
    top: 0;
    position:fixed;
}
ul.main-nav {
    width: 960px;
}
ul.main-nav li {
    float: left;
}
.main-nav > li > a {
    color: #fff;
    display:block;
    padding: 25px 15px;
    text-decoration:none;
}
.main-nav > li > a:hover {
    text-decoration:underline;
}
.inner-wrapper {
    padding:50px 20px;
}
4

1 に答える 1