javascript - 滚动后标题粘滞?

标签 javascript jquery html twitter-bootstrap affix

好的,这是我想问的一个例子, usatoday 的导航栏.

我正在使用 Bootstrap 词缀。这是我的代码

<div class="header">
  <div class="header-1">
    <h1>this is some logo</h1>
  </div>
  <div class="header-2">
    <h3>this is some heading</h3>
  </div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
    this is a footer
</div>

JavaScript

$('.header-2').affix({
});

如何让 div header-2 固定在顶部,(当有一些滚动并且 div header-2 刚刚到达顶部位置时) 从我之前提到的网站开始?

我很想看到 header-1header-2,但是一些滚动应该隐藏 header-1 并粘贴 header-2 到最顶层。

谢谢

最佳答案

查看此 Jsfiddle

您可以检查 slider 的位置并相应地添加类

$(window).scroll(function () {
    if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
      $('#header-2').addClass('posi');
    } else if ($(window).scrollTop() == 0){
      $('#header-2').removeClass('posi');
    }
});

关于javascript - 滚动后标题粘滞?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24545052/

相关文章:

java 与 javascript 的 isNaN 等效的代码

javascript - 通过浏览文件夹为每个 div 分配不同的图像

jquery - 更改 iFrame 的字体大小和字体系列

javascript - html5/javascript 游戏在 ie8 中运行缓慢

javascript - Jquery 控制菜单在所有菜单上显示箭头,即使是没有子菜单的菜单

javascript - 在事件监听器中使用 .replace() 更改某些文本,无法使其工作

javascript - Jquery .load/.empty 不从 div 加载和清空内容

java - jqGrid 过滤器工具栏在 jQuery 选项卡中不起作用

javascript - 在 Firebug 控制台中运行 jQuery 调用

php - 页面加载PHP/HTML5随机声音播放器