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/

相关文章:

javascript - 如何将内部函数值作为参数传递给其回调

具有两个元素和网络音频 api 的 javascript 函数

javascript - 显示工具提示框的样式

jquery - JavaScript 评论系统设计存在的问题

html - Facebook 评论 - wordpress

javascript - 将 select2 插件与 Ember cli 一起使用

javascript - 使用 jsonpath 查询获取父对象

jquery - 我们如何将选定的 div id 与 cookie 进行比较

jquery - 有没有办法用 jquery 循环创建类似于 Nivo Slider 的 strip 过渡效果?

html - 没有 JS 的可点击 HTML/CSS 下拉菜单在 Firefox 中有效,但在 Chrome 中无效