Bootstrap scroll Шпион не соответствует правильному разделу

Question

Хорошо. Это первый раз, когда я использую шпионаж прокрутки бутстрапа, поэтому я не уверен, если я что-то делаю неправильно. (Ну, очевидно, я) Вот проблема (ы). Мне пришлось использовать смещение -190, так что дно красной панели навигации находится там, где начинается секция. Когда я применяю смещение, он не выделяет (активную недвижимость) этот раздел на главном навигаторе. Перед тем, как я прокручу вниз, он просматривает раздел.

Также, похоже, я не нашел способ привязать ссылку, чтобы пройти весь путь. Поскольку он должен идти после основного навигатора. Где я могу поместить идентификатор #home?

---

Вот код: Пожалуйста, обратите внимание, что я не копируя весь HTML, так как это очень долго, но я также прилагаю живую связь.

<header id="global-header"> 
     <div class="header-cont-info"> Call to schedule your <span class="yellow uppercase">free,</span> no obligation assessment: <span class="yellow">407&#8211;844&#8211;1182 </span></div> 
     <!-- Main nav--> 
     <nav id="navbar"> 
      <h1 class="visuallyhidden">Main navigation</h1> 
      <ul class="nav"> 
      <li class="home-mn-btn active"><a href="#home">Home</a></li> 
      <li class="services-mn-btn"><a href="#services">Services</a></li> 
      <li class="reviews-mn-btn"><a href="#reviews-section">Reviews</a></li> 
      <li class="tp-logo"><img src="img/tidy-pools-logo.png" width="332" height="194" alt="Tidy Pools Logo"></li> 
      <li class="faq-mn-btn"><a href="#faq">Faq</a></li> 
      <li class="contact-mn-btnn"><a href="#contact-section">Contact</a></li> 
      <li class="portal-mn-btn"><a href="#">Customer Portal</a></li> 
      </ul> 
     </nav><!-- Main nav ends--> 
     </header> 

<!-- Services section--> 
     <div class="section-dividers-dark"><!--It contains the bottom shadow--> 
      <section id="services"><!--Ribbon ends--> 
      <p><a href="#" class="buttons yellow-buttons fancybox"><span class="modern-pictogram">W</span> View Pictures of Our Work</a></p> 
      <div class="clear-fix"></div> 
      <!-- Residential Pool and Spa Maintenance section--> 
      <section> 
       <header> 
       <h2>Residential Pool and Spa Maintenance</h2> 
       <p>Enjoy comprehensive weekly service for only $80/month, including:</p> 
       </header> 
       <ol> 
       <li><h3>Cleaning And Debris Removal</h3> 
        <ul> 
        <li> Skim surface and bottom of pool</li> 
        <li>Brush interior surfaces and steps</li> 
        <li>Clean tile</li> 
        <li>Vacuum and clean deck as necessary</li> 
        </ul> 
       </li> 
       <li><h3>Water Quality Assurance</h3> 
        <ul> 
        <li>Test water and balance</li> 
        <li>Add necessary chemicals</li> 
        </ul> 
       </li> 
       <li><h3>Equipment Maintenance</h3> 
        <ul> 
        <li>Empty baskets</li> 
        <li>Clean filter</li> 
        <li>Check equipment functioning</li> 
        </ul> 
       </li> 
       </ol> 
      </section><!-- Residential Pool and Spa Maintenance section ends--><br> 
      <!-- Commercial Pool Maintenance section--> 
      <section> 
       <h2>Commercial Pool Maintenance</h2> 
       <p>We offer affordable commercial service as well.<br> 
       Simply call and we’ll be happy to provide you<br> 
       with a customized quote for your property’s needs.</p> 
      </section><!-- Commercial Pool Maintenance section ends--> 
      <!-- Water Recovery Services section--> 
      <section> 
       <h2>Water Recovery Services</h2> 
       <p>For green pool/water recovery services,<br> 
       simply call for your free quote!</p> 
      </section><!-- Water Recovery Services section ends--> 
      </section> 
     </div> 
     <!-- Services section ends--> 

     <!-- Reviews section--> 
     <!-- Section dividers. These expand 100% and are used to separate the sections--> 
     <div class="section-dividers" id="reviews-section"> 
     <!-- Section inner wrappers. These contain the section max-width--> 
     <div class="section-inner-wrapper"> 
      <section id="reviews"> 
      <header><!--Ribbon ends--> 
       <p><span class="dark-blue">See what our valued customers have to say about Tidy Pools quality swimming pool cleaning and maintenance service.</span><span class="yellow"> This is just a sample of the kind testimonials we have received, and we look forward to adding yours!</span></p> 
      </header> 
      <ul id="people-reviews"> 
       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 

       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 
       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 
      </ul> 
</section><!-- Reviews section ends--> 

---

JS

// ******************************** ANIMATED SCROLLING ******************************** 
$('#navbar ul li a').bind('click', function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $(this.hash).offset().top -190 
    }, 300); 
    // edit: Opera requires the "html" elm. animated 
}); 

---

Вот ссылка живой сайт http://tidypools.com/dev/

Большое спасибо заранее!

Answer 1

Вы не правильно устанавливаете data-offset, как описано в Twitter Bootstrap documentation.

Вам нужно исправить <body> тег на что-то вроде:

<body data-spy="scroll" data-offset="170" data-target="#navbar">