Bootstrap scrollspy 不适用于 HAML答案

【问题标题】：Bootstrap scrollspy not working with HAMLBootstrap scrollspy 不适用于 HAML
【发布时间】：2014-05-25 08:47:27
【问题描述】：

我正在尝试从 Bootstrap 库中实现 scrollspy。目前，我手动激活的选项卡保持活动状态，如果我滚动或单击，nav 上的任何内容都不会发生变化。我有以下。有什么想法吗？

.row
  %ul{ :id => "navthingy", :class => "nav nav-tabs nav-stacked fixed span3" }
    %li.active
      %a.icon-user{ :href => '#profile'}
        Profile
    %li
      %a.icon-lightbulb{ :href => '#ideas'}
        Ideas
    %li
      %a.icon-arrow-right{ :href => '#followings'}
        Followings
    %li
      %a.icon-group{ :href => '#teams'}
        Teams
  .span3
  .span9{ :data => { :spy => "scroll", :target => "#navthingy" } }
    .header-banner
      %a.anchor{ :id => 'profile'}
      %h2
        = @user.name
        %small
          = pluralize(@user.ideas.count, "Idea")
          = pluralize(@user.followings.count, "Following")
          = @user.created_at.strftime("Joined %B %Y")
    .user-info
      %p
        %strong= @user.occupation
      %p= @user.info

    .header-banner.spaced
      %a.anchor{ :id => 'ideas'}
      %h2
        Ideas
        %small
          = "Suggested #{pluralize(@user.ideas.count, 'idea')}"    
    = render partial: 'ideas/ideas', locals: { ideas: @user.ideas }

    .header-banner.spaced
      %a.anchor{ :id => 'followings'}
      %h2
        Following
        %small
          = "Following #{pluralize(@user.following_ideas.count, 'idea')}"
    = render partial: 'ideas/ideas', locals: { ideas: @user.following_ideas }

    .header-banner.spaced
      %a.anchor{ :id => 'teams'}
      %h2
        Teams
        %small
          = "Member on #{pluralize(@user.accepted_teams.count, 'team')}"
    = render partial: 'ideas/ideas', locals: { ideas: @user.accepted_teams.map { |x| x.idea } }

:javascript
  $(document).ready(function() {
      equalHeight($(".thumbnail-top"));
  });

【问题讨论】：

标签： twitter-bootstrap haml scrollspy

【解决方案1】：

如果你想有所成就like here。您可以使用 Appiz。只需将您的内容放入电子表格，然后该软件就会创建一个漂亮的单页网页，其中包含一个滚动间谍。

有教程video here as well。

希望对您有所帮助！尼古拉斯

【讨论】：