Twitter Bootstrap Scrollspy 根本不工作 [英] Twitter Bootstrap Scrollspy not working at all

查看:60
本文介绍了Twitter Bootstrap Scrollspy 根本不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我之前问过一个关于 Bootstrap ScrollSpy 的问题,这是我试图让它发挥作用的最后一次尝试.

我想要实现的是在该部分滚动时更改导航栏标签的颜色.我尝试了很多方法,甚至有一个 Jsfiddle 工作,但即使我的应用程序中的设置也不起作用

这就是我所拥有的

JS

$('#spyOnThis').scrollspy();

身体

查看

<div class="row show-grid clear-both"><div id="left-sidebar" class="span3 sidebar"><div class="side-nav sidebar-block"><h3 class="resultTitle fontSize13">发布日期</h2><ul class="日期"><% @response.each_pair 做 |日期,电影|%><li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=>'#d_#{日期}' %></li><%结束%>

<div class="span9"><div id="dateNav"><ul class="nav"><li><% @response.each_pair do |date, movie|%><%= link_to date_format(date), "#d_#{date}" %><% end %></li>

<div id="spyOnThis"><% @response.each_pair 做 |日期,电影|%><h3 class="resultTitle fontSize13" id="d_<%= date %>">可用日期&nbsp;<%= date_format(date) %></h3><% movie.each do |m|%><div class="thumbnail clearfix"><img class="pull-left" src=<% if m.image_link %><%= m.image_link %><%其他%>"/assets/noimage.jpg" <% end %>><div class="caption pull-right"><%= link_to m.name, m.title_id, :class =>'resultTitle fontSize11'%><p class="bio"><%= m.bio%></p><p class="resultTitle">Cast</p><p class="bio"><%= m.cast.join(", ") 除非 m.cast.empty?%</p><%= link_to "Remind me",提醒路径(:title_id => m.title_id), :method =>:post, :class =>'链接按钮'%>

<%结束%><%结束%>

</div><!--span9--></div><!--行--></div><!--/容器-->

CSS

#dateNav{位置:固定;顶部:0;左:20px;宽度:100%;背景:无;文字对齐:居中;}#spyOnThis {高度:100%;溢出:自动;}.nav >立>一种 {显示:块;}.nav >li.active >一种 {显示:块;红色;文字装饰:下划线;}

我知道高度 100% 可能会导致问题,但我的滚动条的高度将取决于内容并且可能会发生变化.

我现在正在拔头发,我读到这个滚动间谍有很多问题,但肯定可以像他们网站上的演示一样工作

编辑

$('#dateNav').scrollspy();<body data-spy="scroll" data-target="#dateNav">

HTML

ul class="nav"><li><a href="#d_2013-01-09">2013 年 1 月 9 日</a><a href="#d_2013-01-11">2013 年 1 月 11 日</a><a href="#d_2013-01-18">2013 年 1 月 18 日</a><a href="#d_2013-01-23">2013 年 1 月 23 日</a><a href="#d_2013-01-25">2013 年 1 月 25 日</a><a href="#d_2013-01-30">2013 年 1 月 30 日</a>

<h3 id="d_2013-01-09" class="resultTitle fontSize13">2013 年 1 月 9 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-11" class="resultTitle fontSize13">2013 年 1 月 11 日可用</h3><div class="thumbnail clearfix"><div class="thumbnail clearfix"><div class="thumbnail clearfix"><div class="thumbnail clearfix"><h3 id="d_2013-01-18" class="resultTitle fontSize13">2013 年 1 月 18 日可用</h3><div class="thumbnail clearfix"><div class="thumbnail clearfix"><h3 id="d_2013-01-23" class="resultTitle fontSize13">2013 年 1 月 23 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-25" class="resultTitle fontSize13">2013 年 1 月 25 日可用</h3>

这会将所有链接变为红色,以便它们现在都处于活动状态?

我的身体也是 100% 的粘性页脚,不确定这是否有所不同非常感谢帮助

解决方案

您需要从正文中移动 data-spy 和 data-target 属性:

并将它们移动到 div "spyOnThis":

应该是:

根据文档:

"要轻松地将滚动监视行为添加到顶部导航栏,只需将 data-spy="scroll" 添加到您要监视的元素(通常是主体)和 data-target=".navbar" 到选择要使用的导航.您需要使用带有 .nav 组件的 scrollspy."

根据您的 HTML,您还需要修复一些问题:

您的列表标签未关闭:

应该是:

您的 div 也没有正确关闭:

<h3 id="d_2013-01-09" class="resultTitle fontSize13">2013 年 1 月 9 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-11" class="resultTitle fontSize13">2013 年 1 月 11 日可用</h3><div class="thumbnail clearfix"><div class="thumbnail clearfix"><div class="thumbnail clearfix"><div class="thumbnail clearfix"><h3 id="d_2013-01-18" class="resultTitle fontSize13">2013 年 1 月 18 日可用</h3><div class="thumbnail clearfix"><div class="thumbnail clearfix"><h3 id="d_2013-01-23" class="resultTitle fontSize13">2013 年 1 月 23 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-25" class="resultTitle fontSize13">2013 年 1 月 25 日可用</h3>

应该是(只展示其中的几个):

<h3 id="d_2013-01-23" class="resultTitle fontSize13">2013 年 1 月 23 日可用</h3>

<div class="thumbnail clearfix"><h3 id="d_2013-01-25" class="resultTitle fontSize13">2013 年 1 月 25 日可用</h3>

此外,似乎 100% 的高度使其仅突出显示导航栏列表中最底部的条目.

I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.

What I am trying to achieve is to change the colour of the navbar a tag when scrolling in that section. I have tried many ways and even have a Jsfiddle working but even that setup in my app does not work

This is what I have

JS

$('#spyOnThis').scrollspy();

Body

<body data-spy="scroll" data-target="#spyOnThis">

View

<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
  <div class="side-nav sidebar-block">
    <h3 class="resultTitle fontSize13">Release Dates</h2>
    <ul class="date">
      <% @response.each_pair do |date, movie| %>
      <li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
    <% end %>
    </ul>
  </div>
</div>
<div class="span9">
  <div id="dateNav">
    <ul class="nav">
      <li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
    </ul>
  </div>
  <div id="spyOnThis">
  <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>

    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

CSS

#dateNav{
position: fixed;
top: 0; left: 20px;
width: 100%;
background:none;
text-align:center;
}

#spyOnThis {
 height:100%;
 overflow:auto;
}

 .nav > li > a {
  display:block;
  }

.nav > li.active > a {
 display:block;
 color: red;
 text-decoration: underline;
 }

i know that height 100% may cause an issue but the height of my scroller will depend on the content and it can change.

I am now pulling my hair out, i have read that this scrollspy is quite buggy but surely it must work as the demo on their site does

EDIT

$('#dateNav').scrollspy();

<body data-spy="scroll" data-target="#dateNav">

HTML

ul class="nav">
 <li>
 <a href="#d_2013-01-09">9th Jan 2013</a>
 <a href="#d_2013-01-11">11th Jan 2013</a>
 <a href="#d_2013-01-18">18th Jan 2013</a>
 <a href="#d_2013-01-23">23rd Jan 2013</a>
 <a href="#d_2013-01-25">25th Jan 2013</a>
 <a href="#d_2013-01-30">30th Jan 2013</a>
 </li>

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

This turns all the links red so they are now all active?

also my body is 100% for sticky footer, not sure if that makes a difference Help really appreciated

解决方案

You need to move the data-spy and data-target attributes from the body:

<body data-spy="scroll" data-target="#dateNav">

and move them to the div "spyOnThis":

<div id="spyOnThis">

Should be:

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

Per the documentation:

"To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component."

Based on your HTML you also need to fix a couple things:

Your list tags are not closed:

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

Should be:

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

Your divs not properly closed either:

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

Should be (just showing a couple of them):

<div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
</div>
<div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
</div>

Also it seems that the 100% height causes it to only highlight the bottom-most entry in the navbar list.

这篇关于Twitter Bootstrap Scrollspy 根本不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆