Twitter-Bootstrap Scrollspy答案

【问题标题】：Twitter-Bootstrap ScrollspyTwitter-Bootstrap Scrollspy
【发布时间】：2012-12-30 03:36:26
【问题描述】：

我想在菜单上实现 Twitter-Bootstrap Scrollspy，这样当用户滚动到页面的某个部分时，css 类就会发生变化。这被证明是令人沮丧的。我已经在使用代码中的附加代码，效果很好。

因此，当用户滚动到 #ScrollSpyContent 的 LI 元素时，从下面的代码中，我想将 .product_submenu_image 的类更改为 .product_submenu_active。

我该怎么做？

（我在java 中使用jsp，所以它们可能是这里的一些java代码。我试图去掉大部分。）

谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">   
 <head>
     <link rel="stylesheet" href="/css/bootstrap.css"/>
     <link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>

    <body> 
        <header></header>
        <div class="row-fluid product_submenu">
            <nav class="span10 offset1">
                <ul class="productmenus">
                    <li><a href="#product_features"><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/>&nbsp;Product Features</div></a></li>
                    <li><a href="#gettingstarted"><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/>&nbsp;Getting Started</div></a></li>
                    <li><a href="#product_support"><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/>&nbsp;Product Support</div></a></li>
                </ul>
            </nav>  
        </div>
        <div class="container-fluid">
            <nav class="row-fluid" >      
                <ul class="span10 offset1" data-spy="scroll">       
                    <li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
                    <li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started  -->
                    <li class="row-fluid" id="product_support"></li><!-- End Product support  -->
                </ul>
            </nav>
        </div>        
        <footer></footer>
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="/js/bootstrap.js"></script>
        <script>
        $(function() {
          var $spy = $('.productmenus');
          $spy.scrollspy({offset: 20});
          $spy.bind("activate", function(e) {
            //e.target is the current <li> element
            var header = $(e.target).find(".product_submenu_image");
            $(header).addClass('active');
          });
        });    
        </script>
     </body>
</html>

CSS：

.product_submenu_image
{
    background: url('../img/product_tab_default.gif');
    max-height: 100%;
    padding: 18% 0 18% 0;
    border: none;
}

.product_submenu_image.active
{
    background: blue;
    /*background: url('../img/product_tab_selected.gif');*/
}

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

所以你需要使用这里描述的滚动间谍activate 事件： http://twitter.github.com/bootstrap/javascript.html#scrollspy

基本上你需要一些这样的代码：

$(function() {
  var $spy = $('.nav.nav-pills');
  $spy.scrollspy({offset: 20});
  $spy.bind("activate", function(e) {
    // do stuff here when a new section is in view
  });
});

这是一个工作示例： http://jsfiddle.net/hajpoj/f2z6u/3/

请忽略它从底部开始的事实...不确定这是无关的还是相关的错误，但重点是您可以看到激活事件的工作原理

【讨论】：

我已经根据您的一些建议更新了上面的代码。我一定错过了一些东西，因为它仍然无法正常工作。不工作...意味着我看不到任何迹象表明滚动时触发了某些事情
所以我注意到几件事情：（1）你需要在ul 元素上拥有.nav 类，因为scrollspy 依赖于此。 (2) 对于你正在做的事情，你不需要我的代码。当 scrollspy 正常工作时，它会在您的 li 元素上添加一个类 .active。因此您可以将第二个 css 从 .product_submenu_image.active 更改为 .active .product_submenu_image 。为了帮助您进行调试，请尝试使用 chrome 开发人员工具或 firebug 来确保将 active 类添加到您的 li 元素中。我原本以为你想改变你的 content 而不是你的 nav