【问题标题】:Sliding Navigation Bar - How Did They Do It?滑动导航栏——他们是怎么做到的?
【发布时间】:2014-02-21 00:19:52
【问题描述】:

我正在尝试弄清楚如何获得这种滑动导航栏效果:http://manoscrafted.com/。我可以修复顶部的英雄图像并上下滑动底部导航栏,但是它不会粘在顶部。

这是通过 JavaScript 完成的,还是我在 CSS 中遗漏了什么?

谢谢!

【问题讨论】:

标签: javascript css navigation navbar sliding


【解决方案1】:

使用 JavaScript 实现,大多数人会称这种“视差”滚动带有“固定”或“粘性”标题/导航

查看视差示例:

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

查看粘性/固定示例:

http://jsfiddle.net/tovic/2jqCA/

var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;

win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
});

【讨论】:

  • 太棒了!谢谢!我对 JavaScript 不太熟悉。如果我想使用一个类,而不是使用标签“nav”,我可以只做 $('.header'), 吗?然后关于 fxel.addClass("fixed");我会在我的 css 中为 .header.fix 创建一个新类吗?
  • 简短的回答是肯定的。长答案是,当您开始更改某些内容时,您可能需要更改其他内容才能使一切恢复正常;)
  • 谢谢!我会试着弄清楚。它还不能工作,但是当我滚动时,我确实会像闪光灯一样快速。希望我走在正确的轨道上。
猜你喜欢
  • 2010-12-07
  • 1970-01-01
  • 2011-01-26
  • 2011-01-24
  • 1970-01-01
  • 2011-03-04
  • 1970-01-01
  • 2012-11-22
  • 1970-01-01
相关资源
最近更新 更多