我一直在尝试集成一个使用bootstrap词缀和滚动间谍的右对齐菜单来修复它的位置。总的来说，我可以让它工作正常，但当它滚动到底部时它变得非常跳跃（我已经阅读了各种文档，可能可以排序）。但主要是当我滚动到页面的最底部并且.affix-bottom已分配给菜单（一切工作正常）时，我单击菜单中的一个下方链接，它将删除.affix-bottom并打破布局
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>
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' })
});
先谢谢，我在这里很新，所以请告诉我任何失礼......
答案 0 :(得分：0)
为什么不改变：
offset: {
top: 190,
bottom: 350
}
要：
offset: {
top: 190
}
另请注意，由于您有更长的菜单项，因此选择类（当它们滚动到它们时）会导致它们的宽度超过它们占用的行数，因此它们可以“跳转”到第二行。您可以更改菜单宽度，文本长度或底层CSS来抵消这一点。