javascript - 在 Bootstrap 3 中修改 OnScroll Navbar？

Question

我是一名大学学生，想知道我想在元素中使用的这个用例的最佳解决方案是什么:

标准 navbar navbar-default navbar-fixed div 里面有一个 nav navbar-nav navbar-right div。在左侧有一个标识 http://www.bootply.com/8PW9UzYPOo

滚动时被替换为 navbar-brand 元素，该元素包含标识 http://www.bootply.com/Q3NXBLXWBN 的字样.

我认为 javascript 在某种程度上是解决方案，但我不确定。

---

伪代码

If scroll beyond x pixels
hide logotype <a> link
replace with text <a> link
text as class="navbar-brand"

---

我在另一个网站上看到的一个例子，但它是这个 example 上的 Drupal 模块并且 Logo 只是消失而不是被替换。

Answer 1

只需在您的元素上添加类，而不是使用它

例如

$(window).scroll(function(){
  var sticky = $('.navbar-fixed-top'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

然后和那个类(class)一起玩

.logo-text {
    display:none;
}
.fixed .logo-text {
    display:block;
}
.fixed .logo-img {
    display:none;
}

working example