Question

相当基本的问题。我试图让bootstrap scrollspy在我正在处理的单页网站上工作，并且已经查看了一段时间的文档但是无法弄清楚为什么rolllspy不是接受不同的部分。相反，它将活动类添加到最终部分的链接，而不管显示哪个部分。

任何人都可以看到问题所在吗？

Codepen：https://codepen.io/anon/pen/oZEWMy。

HTML：

<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">

  <div class="container-fluid">

    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>                        

            </button>

        </div>

        <div class="collapse navbar-collapse" id="navbar">

            <ul class="pull-right nav navbar-nav">

                <li class="navLink"><a href="#home" alt="Home Button">Home</a></li>

                <li class="navLink"><a href="#about" alt="About Button">About</a></li>

                <li class="navLink"><a href="#skills" alt="Skills Button">Skills</a></li>

                <li class="navLink"><a href="#work" alt="Work Button">Work</a></li>

                <li class="navLink"><a href="#contact" alt="Contact Button">Contact</a></li>

            </ul>

            <ul class="pull-right nav navbar-nav">

                <li class="socialIcon"><a href="https://github.com/nickwcook/" target="_blank"><span class="fa fa-github fa-lg"></span></a></li>

                <li class="socialIcon"><a href="https://www.linkedin.com/in/nicholas-cook-796b08125" target="_blank"><span class="fa fa-linkedin fa-lg"></span></a></li>

                <li class="socialIcon"><a href="Nicholas Cook - CV.pdf" target="_blank"><span class="fa fa-file-pdf-o fa-lg"></span></a></li>

            </ul>

        </div>

    </nav>

    </div>

    <main data-simplebar>

        <section id="home">

            <div class="sectionContent">

                <h1 id="intro">My name is Nick Cook.</br> I'm a Graduate Web Developer with experience in developing responsive and dynamic websites using a variety of different development skills.</h1>

            </div>

        </section>

        <section id="about">

            <div class="sectionContent">

               <div class="row">

                   <div class="col-sm-12 col-md-10">

                        <h1>About Me</h1>

                        <p>I'm a Computer Science Graduate of the University of Chester with a keen interest in development, which I gained as a result of undertaking various web-based units during my studies. I've enjoyed developing websites for a variety of different scenarios, both in university and for different clients, and I've also independently furthered my skills in my own time using online resources. Having already gained experience in developing responsive and dynamic websites using basic front-end and back-end technologies as a student, I've since continued to learn new skills in a variety of popular development frameworks, content management systems and tools, including Bootstrap CSS framework, AngularJS and the Angular Material UI framework, custom WordPress theming and Git.</p>

                   </div>

                   <div class="col-sm-12 col-md-2">



                   </div>

                </div>

            </div>

        </section>

        <section id="skills">



        </section>

        <section id="work">

           <div class="sectionContent">



            </div>

        </section>

        <section id="contact">

            <div class="sectionContent">



            </div>

        </section>

    </main>

Answer 1

问题是各部分的位置和高度。它应该是：

section
{
    min-height: 100vh;
    width: 100%;
    background: transparent;
}

https://codepen.io/anon/pen/LWQLPJ

Bootstrap Scrollspy无法正常工作并停留在一个页面上

1 个答案: