个人中心
gpt4 book ai didi

javascript - Twitter Bootstrap Scroll spy

转载 作者：行者123 更新时间：2023-11-28 12:10:39 25 4
gpt4 key购买 nike

当用户开始滚动时，我遇到了 Twitter bootstrap scroll spy 的问题。在到达 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;
}

最佳答案

Bootstrap 站点的源代码中包含这个小块:

/* Janky fix for preventing navbar from overlapping */
h1[id] {
  padding-top: 80px;
  margin-top: -45px;
}

我注意到部分标题工作正常，但子导航仅在 sidenav(滚动 spy )到达页面顶部(位于我的静态标题导航后面)时激活

所以我添加了这个:

h3[id] {
  padding-top: 80px;
  margin-top: -80px;
}

这是用于我的每个子导航部分标题的内容。中提琴。固定。

关于javascript - Twitter Bootstrap Scroll spy ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19526913/

25 4 0
文章推荐： css - 基于类名自动化 CSS 样式
文章推荐： javascript - 如何在 Javascript 中为表格中的每个单元格 Hook onclick 事件？
文章推荐： Jquery slimScroll 问题与里面的另一个滚动条
文章推荐： Javascript 关闭问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com