1

编辑

我使用以下代码创建了自己的修复程序。它使用偏移量来获取锚标记的位置，并在到达该滚动点时将活动类添加到导航列表项。运行良好且高效：

customScrollSpy($(window).scrollTop());

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   customScrollSpy(st);
});

function customScrollSpy(st) {
  if ((st >= $("#top").offset().top && st < $("#latest-work").offset().top) && !$("#nav-item-1").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-1").addClass("active");
   }
   else if ((st >= $("#latest-work").offset().top && st < $("#content1").offset().top) && !$("#nav-item-2").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-2").addClass("active");
   }
   else if ((st >= $("#content1").offset().top && st < $("#latest-news").offset().top) && !$("#nav-item-3").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-3").addClass("active");
   }
   else if (st >= $("#latest-news").offset().top && !$("#nav-item-4").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-4").addClass("active");
   }
};

结束编辑

正如标题所示，我有 Scrollspy（显然使用 Bootstrap），我用 Javascript 初始化它：

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

哪个工作正常。但是，如果导航栏中的列表元素（li 标签）之一引用了一个模态的 div，它就会翻转。当我开始滚动时，它会将活动类从该列表项翻转到该滚动位置处的正确列表项，因此导航栏列表项看起来像是在您向上和向下滚动时不断闪烁。这是我的导航栏和我身体的开始：

<body id="top" data-spy="scroll" data-target=".navbar">

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              <li><a class="scroll" href="#top">Home</a></li>
              <li><a class="scroll" href="#latest-work">Work</a></li>
              <li><a class="scroll" href="#content1">About</a></li>
              <li><a class="scroll" href="#latest-news">News</a></li>
              <li><a class="scroll" data-toggle="modal" href="#request-quote">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

如您所见，最后一个列表项（“联系人”）是破坏它的原因。删除“滚动”类没有任何帮助。我不确定问题出在哪里，但是更改该列表项上的 href 可以解决整个问题。此外，我在导航栏下方的轮播中有一个按钮，它也打开了模式。它似乎不会导致这个问题 - 如果我更改 Contact li 的 href 但让按钮指向上面代码中 Contact 指向的相同模式，这也可以正常工作。

这是重要的情况下的模态：

<!--Request Quote modal-->
    <div id="request-quote" class="modal hide fade" tabindex="-1" data-width="760">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Request a quote</h3>
      </div>
      <form method="POST" action="contact-form-submission.php" class="form-horizontal">
      <div class="modal-body"> 
        <div class="row-fluid">
          <div class="span12">
            <h4>*All information is required</h4>
            <p><label>Full Name</label>
            <input name="name" type="text" class="span12"></p>
            <p><label>Band Name</label>
            <input name="band_name" type="text" class="span12"></p>
            <p><label>Email</label>
            <input name="email" type="email" class="span12"></p>
            <p><label>Link to Your Band's Prior Material (Facebook, Youtube, etc.)</label>
            <input name="link" type="text" class="span12"></p>
          </div>
        </div>
        <div class="row-fluid">
          <h5 class="span12">What are you looking for?</h5>
        </div>
        <div class="row-fluid">
          <div class="span4">
            <p><label>Select all that apply:</label></p>
            <p class="form-boxes"><label class="hand">
            <input name="tracking" type="checkbox" value="tracking"> Tracking
            </label>
            <label class="hand">
            <input name="mixing" type="checkbox" value="mixing"> Mixing
            </label>
            <label class="hand">
            <input name="mastering" type="checkbox" value="mastering"> Mastering
            </label>
            <label class="hand">
            <input name="editing" type="checkbox" value="editing"> Editing
            </label>
            <label class="hand">
            <input name="other" type="checkbox" value="other"> Other
            </label></p>
          </div>
          <div class="span8">
            <p><label>Number of Songs</label>
            <input name="songs" type="text" class="span12"></p>
            <p><label>Explain your project/needs (if you selected "other", please clarify)</label>
            <textarea name="comments" class="span12"></textarea></p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-inverse">Close</button>
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
      </form>
    </div>
    <!--/Request Quote modal-->

任何帮助将不胜感激。

更新：

我注释掉了$('#navbar').scrollspy();，它仍然在发生。删除我的模态代码有效，所以我不确定问题是什么......除了这个，模态函数很好。任何想法发生了什么？

4

1 回答 1

2

对于我的实现，只需更改标签/类并将 boostrap 样式添加到新类即可，就像 Scrollyspy 查找.nav li > a. 当然，在我的情况下，由于模式弹出，不需要主动效果。这对我来说似乎更快更干净，但可能不是每个人的样式和功能特定问题的解决方案。

于 2013-07-26T16:14:56.143 回答