css - Bootstrap 附加菜单在菜单项单击时中断

Question

我一直在尝试集成一个右对齐菜单，该菜单使用 bootstrap 词缀和 scroll-spy 来固定其位置。总的来说，我可以让它正常工作，但是当它滚动到底部时，它变得非常不稳定(我已经阅读了各种文档，并且可能可以排序)。但主要是当我滚动到页面的最底部并且 .affix-bottom 已分配给菜单时(一切正常)我单击菜单中下方的链接之一，它删除了 .affix-bottom 并破坏了布局.

请找一个fiddle here

HTML 在这里(抱歉，很多，但页面需要很长才能解决我遇到的问题):

<header></header>
<div class="cf">
<div class="container-service-menu">
                        <div id="services-menu">
                            <div class="hidden-print">
                                <ul class="nav">
                                    <li class="nav-header">Our services</li>
                                    <li><a href="#System">System auditing</a> </li>
                                    <li><a href="#Risk">Risk assessments</a></li>
                                    <li><a href="#Management">Management documentation</a> </li>
                                    <li><a href="#ppm">Pre-planned maintenance systems</a> </li>
                                    <li><a href="#Reporting">Reporting and logging programmes</a> </li>
                                    <li><a href="#Tender">Tender management</a> </li>
                                    <li><a href="#Contractor">Contractor selection and supervision</a> </li>

                                    <li><a href="#Design">Design validation</a> </li>
                                    <li><a href="#Bacterial">Bacterial contamination management</a> </li>
                                    <li><a href="#Independent">Independent water treatment advice</a> </li>
                                    <li><a href="#Crisis">Crisis management</a> </li>
                                    <li><a href="#Expert">Expert witness</a> </li>
                                    <li><a href="#Scientific">Scientific research</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
<div class="content">
<h2>Our services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>
<h3 id="System" class="section-header">System auditing</h3>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Risk" class="section-header">Risk assessments</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Management" class="section-header">Management documentation</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="ppm" class="section-header">Pre-planned maintenance systems</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Reporting" class="section-header">Reporting and logging programmes</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Tender" class="section-header">Tender management</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>

<h3 id="Contractor" class="section-header">Contractor selection and supervision</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>
<h3 id="Design" class="section-header">Design validation</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Bacterial" class="section-header">Bacterial contamination management</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Independent" class="section-header">Independent water treatment advice</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sagittis metus. Suspendisse augue mi, fringilla eu mauris in, congue dignissim neque. Phasellus sed gravida eros. Quisque dictum iaculis blandit. Donec suscipit, nisi eu blandit aliquet, ligula nulla placerat leo, vel viverra turpis elit et ligula. Duis purus nisl, consectetur in metus in, consequat pulvinar libero. In lacus enim, posuere vitae mauris non, imperdiet molestie eros. Praesent egestas vestibulum dolor ut imperdiet. Cras mollis vel tellus quis viverra. Phasellus nec eros et mi pellentesque bibendum. Quisque sit amet leo tincidunt, imperdiet est eget, pellentesque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam a feugiat eros. Integer nisi lorem, euismod aliquam iaculis in, fermentum a purus. Aenean mollis dui rutrum sagittis fermentum. Donec elementum augue at nunc malesuada, et pulvinar mi tempor.
</p>
<p>
Nullam eleifend vel mi sit amet lacinia. Etiam feugiat semper ante, egestas faucibus diam fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget ante eget enim volutpat imperdiet at ut odio. Integer ut accumsan tellus. Proin posuere molestie mi, ut tempor lacus tincidunt in. Phasellus adipiscing tellus sed libero porta, quis pellentesque augue vehicula. Aenean euismod elit a tellus porta pulvinar eu non nisi. Proin nec luctus dui. Ut congue a nisi non scelerisque. Aliquam at congue nunc. Curabitur nisl lorem, fermentum at lobortis et, scelerisque quis mi. Vivamus porttitor sagittis urna, in auctor felis bibendum sed. Donec ultricies turpis et ligula pretium pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Crisis" class="section-header">Crisis management</h3>

<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

<h3 id="Expert" class="section-header">Expert witness</h3>

<p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p> <h3 id="Scientific" class="section-header">Scientific research</h3>
    <p>
Mauris viverra commodo accumsan. Suspendisse potenti. Donec vitae metus faucibus, commodo velit ornare, sodales leo. Mauris non congue urna, ut elementum sapien. Proin iaculis metus non lacinia consequat. Fusce dignissim gravida augue, vel rhoncus massa lobortis ut. Quisque quis arcu fermentum ligula viverra dapibus.
</p>

    </div>
                </div>
    <footer></footer>

此处的 CSS:

header {
    height: 180px;
    width: 100%;
    background: grey;
}

footer {
    height: 200px;
    width: 100%;
    background: grey;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.content {
    float: left;
    margin:0;
    width: 70%;
    position: relative;
}
.container-service-menu {
    position: absolute;
    right: 0;
    width: inherit;
}

#services-menu {
    }

#services-menu .nav li a {
    padding: 5px 10px;
}

#services-menu.affix-top {
    top:27px; 
    }

#services-menu.affix {
    top:30px;
    position: fixed!important;
    width: inherit;
    }

#services-menu.affix-bottom {
    width: inherit;
    position: absolute;
    /*top: auto!important;*/
    bottom: 350px;  /*height of the footer*/
    }

#services-menu div ul li.active {
    background: #0099D8;
    color: #fff;
    border-left: 3px solid grey;
    }

#services-menu div ul li.active a:hover {
    background: #0099D8;
    cursor:default;
    }

#services-menu div ul li.active a {
    color: #fff;
    }

#services-menu div ul li.nav-header {
    padding: 10px 15px;
    background: #EFEFEF;
    /* color: #fff; */
    /* font-weight: bold; */
    border-bottom: 3px solid #0099D8;
    font-size: 0.85em;
    text-transform: uppercase;
    }

还有 JS:

$(document).ready(function () {
            $('#services-menu').affix({
                offset: {
                    top: 190,
                    bottom: 350
                }
            });
            $('body').scrollspy({ target: '#services-menu' })
        });

提前致谢，我是新来的所以请告诉我任何失礼......

Answer 1

为什么不改变:

offset: { 
    top: 190, 
    bottom: 350 
}

收件人:

offset: { 
    top: 190
}

Demo Fiddle

另请注意，当您有更长的菜单项时，选择类(当它们被滚动到时)会导致它们的宽度超过它们占据的行数，因此它们可能会“跳”到第二行。您可以更改菜单宽度、文本长度或底层 CSS 来抵消这种情况。