Bootstrap詞綴菜單項點擊

Question

我一直試圖集成一個右對齊的菜單，它使用引導詞綴和滾動間諜來修復它的位置。總的來說，我可以讓它工作正常，但當它滾動到底部時，它會變得非常跳躍（我已閱讀過關於此的各種文檔，並且可能會進行排序）。但主要是當我滾動到頁面的最底部和.affix底部已分配給菜單（所有工作正常），我點擊菜單中的一個較低的鏈接，它刪除.affix底部並打破布局。

請在這裏找到一個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

另請注意，由於您有更長的菜單項，選擇類（當它們滾動到）會導致它們的寬度超過lin的數量他們佔據的位置，以便他們可以跳到第二線。您可以更改菜單寬度，文本長度或底層CSS來抵消這一點。