Question

我是大学的学生，想知道这个用例的最佳解决方案是什么，我想在项目中使用：

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

的标识滚动时的

替换为包含标识http://www.bootply.com/Q3NXBLXWBN字样的navbar-brand元素。

我认为javascript会成为解决方案，但我不确定。

伪代码

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

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

Answer 1

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

例如

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

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

而不是玩那个班级

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

<强> working example

OnScroll Navbar在Bootstrap 3中修改？

1 个答案: