在bootstrap wordpress中滚动侧面菜单不会滚动页面

时间:2013-12-29 18:03:28

标签: javascript wordpress twitter-bootstrap sidebar smooth-scrolling

我正在尝试滚动侧边栏菜单。我似乎正确地调用了javascript,但我根本无法滚动它。

我希望菜单能够修复附加的菜单,我希望能够顺利滚动。

这是我的HTML:

<div class="container">
<div class="row">
        <div class="col-md-3 practoreint" id="leftCol">

            <ul class="nav nav-stacked" id="sidebar">
              <li><a href="#software"><b>EndoBalance Software</b></a></li>
                 <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                 </ul>
              <li><a href="#continuing"><b>Continuing Education</b></a></li>
                 <ul>
                      <li><a href="#webinars">Webinars</a></li>
                      <li><a href="#casereview">Case Review Sessions</a></li>
                      <li><a href="#networking">Networking Meetups</a></li>
                      <li><a href="#certification">Certification Courses</a></li>
                      <li><a href="#cecosts">Continuing Education Costs</a></li>
                 </ul>
              <li><a href="#development"><b>Practitioner Development</b></a></li>
                 <ul>
                       <li><a href="#outside">Outside Network Referral</a></li>
                       <li><a href="#networkprovider">Wellness Network Provider</a></li>
                       <li><a href="#wellnesspractitioner">Certified Wellness Practitioner</a></li>
                       <ul>
                            <li><a href="#level1">Level 1 Certification</a></li>
                            <li><a href="#level2">Level 2 Certification</a></li>
                            <li><a href="#level3">Level 3 Certification</a></li>
                            <li><a href="#level4">Level 4 Certification</a></li>
                       </ul>
                 </ul>
              <li><a href="#student"><b>Student Educational Development</b></a></li>
              <li><a href="#hippa"><b>HIPPA and Privacy</b></a></li>
            </ul>

        </div>  
        <div class="col-md-9">
            <p>This section describes the wellness software program, professional education system, practitioner corporate opportunity, student development and HIPPA privacy. We welcome <a href="/contact/">questions and feedback</a> on this content.</p>

            <hr class="col-md-12">
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>

这是css:

.affix-top,.affix {
position: static;
}

@media (min-width: 979px) {
#sidebar.affix-top {
    position: static;
    margin-top: 30px;
    width: 228px;
}

#sidebar.affix {
    position: fixed;
    top: 70px;
    width: 228px;
}
}

#sidebar li.active {
border: 0 #eee solid;
border-right-width: 4px;
}

这是java:

/*!
 * JS Scripts
 */
// Placeholder
$('#sidebar').affix({
  offset: {
    top: 235
  }
});

var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
target: '#leftCol',
offset: navHeight
});

/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - 50
    }, 1000);
    return false;
  }
}
});

1 个答案:

答案 0 :(得分:0)

这是固定的导航栏滚动页面答案:

http://bootply.com/104641