然后滚动到顶部

只是想知道是否有人知道如何重新创建我之前看到的导航栏样式，我刚刚找到了我看到它的网站，但我不确定它们是如何到达那里的。 基本上希望它随页面滚动然后锁定到顶部…

http://lesscss.org/

Answer 1

只需在http://lesscss.org/上快速查看“查看源代码”，您就会看到：

window.onscroll = function () { if (!docked && (menu.offsetTop - scrollTop() < 0)) { menu.style.top = 0; menu.style.position = 'fixed'; menu.className = 'docked'; docked = true; } else if (docked && scrollTop() <= init) { menu.style.position = 'absolute'; menu.style.top = init + 'px'; menu.className = menu.className.replace('docked', ''); docked = false; } }; 

它们绑定到窗口的onscroll事件，当窗口滚动时会触发此事件。 当菜单“锁定”到页面顶部时， docked标志设置为true，菜单设置为position:fixed在该标志设置为true的同时position:fixed 。 其余的只是一些简单的“我们是否要滚动页面上的菜单”和“我们回到我们开始的地方”位置检查逻辑。

你必须小心onscroll事件，它们可以快速连续发射很多 ，所以你的处理程序需要非常快，并且应该尽可能地预先计算。

在jQuery中，它看起来几乎相同：

 $(window).scroll(function() { // Pretty much the same as what's on lesscss.org }); 

你会经常看到这种类似于 “浮动几乎固定位置垂直工具栏”的东西，例如在crack.com上的那些东西 。

Answer 2

mu太短了答案正在工作，我只是张贴这个给你jquery脚本！

 var docked = false; var menu = $('#menu'); var init = menu.offset().top; $(window).scroll(function() { if (!docked && (menu.offset().top - $("body").scrollTop() < 0)) { menu.css({ position : "fixed", top: 0, }); docked = true; } else if(docked && $("body").scrollTop() <= init) { menu.css({ position : "absolute", top: init + 'px', }); docked = false; } }); 

Answer 3

穆的回答让我很开心。 我尝试使用replicationg lesscss.org的方法，但在浏览器resize和缩放方面遇到了问题。 我花了一些时间来了解如何正确地做出反应以及如何在没有jQuery或任何其他库的情况下重置初始位置（ init ）。

在JSFiddle上查找预览： http ： //jsfiddle.net/ctietze/zeasg/

所以这里是详细的JavaScript代码，以防JSFiddle拒绝工作。

---

可重复使用的滚动然后快照菜单类

这是一个可重复使用的版本。 我将滚动检查放入一个类中，因为帮助器方法涉及到我的主命名空间：

 var windowScrollTop = function () { return window.pageYOffset; }; var Menu = (function (scrollOffset) { var Menu = function () { this.element = document.getElementById('nav'); this.docked = false; this.initialOffsetTop = 0; this.resetInitialOffsetTop(); } Menu.prototype = { offsetTop: function () { return this.element.offsetTop; }, resetInitialOffsetTop: function () { this.initialOffsetTop = this.offsetTop(); }, dock: function () { this.element.className = 'docked'; this.docked = true; }, undock: function () { this.element.className = this.element.className.replace('docked', ''); this.docked = false; }, toggleDock: function () { if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) { this.dock(); } else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) { this.undock(); } } }; return Menu; })(windowScrollTop); var menu = new Menu(); window.onscroll = function () { menu.toggleDock(); }; 

处理缩放/页面resize事件

 var updateMenuTop = function () { // Shortly dock to reset the initial Y-offset menu.undock(); menu.resetInitialOffsetTop(); // If appropriate, undock again based on the new value menu.toggleDock(); }; var zoomListeners = [updateMenuTop]; (function(){ var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0]; var lastWidth = 0; function pollZoomFireEvent() { var widthNow = w.innerWidth || e.clientWidth || g.clientWidth; if (lastWidth == widthNow) { return; } lastWidth = widthNow; // Length changed, user must have zoomed, invoke listeners. for (i = zoomListeners.length - 1; i >= 0; --i) { zoomListeners[i](); } } setInterval(pollZoomFireEvent, 100); })(); 

Answer 4

听起来像Jquery ScrollTop的应用程序和navbar元素的CSS属性的一些操作。 因此，例如，在某些滚动条件下，导航条元素从具有计算坐标的绝对定位改变为固定定位。

http://api.jquery.com/scrollTop/

Answer 5

您描述的效果通常从某种类型的动画开始，例如在TheDeveloper的答案中。 默认动画通常通过随时间改变其位置来滑动元素或通过改变其不透明度等来淡入/淡出元素。

获得“回归”或“突然”效应通常会导致宽松。 所有主要框架都有某种forms的宽松政策。 这完全取决于个人偏好; 他们中的任何一个都不会出错。

jQuery具有可以与.animate()函数一起使用的缓动插件 ，或者您可以使用jQueryUI 。

MooTools已经内置到核心库的FX类中。

雅虎的YUI也有内置缓和function 。

如果你能记住它是什么网站，你可以再次访问它并查看它们的来源，看看使用了什么框架和效果。