滚动然后对齐到顶部

Question

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

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。剩下的只是一些简单的“我们是否要将菜单滚动到页面之外”和“我们是否要回到我们开始的位置”位置检查逻辑。

不过，您必须小心 onscroll 事件，它们可以快速连续地大量触发，因此您的处理程序需要非常快，并且应该尽可能多地进行预先计算。

在 jQuery 中，它看起来几乎是一样的：

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

你经常会看到这种事情，比如“浮动几乎固定位置的垂直工具栏”，例如 cracked.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 的方法，但遇到了浏览器调整大小和缩放的问题。我花了一段时间才弄清楚如何正确应对该问题以及如何重置初始位置（init)，无需 jQuery 或任何其他库。

在 JSFiddle 上查找预览： http://jsfiddle.net/ctietze/zeasg/< /a>

下面是详细的纯 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();
};

处理缩放/页面调整大小事件

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 的应用程序以及对导航栏元素的 CSS 属性的一些操作。例如，在某些滚动条件下，导航栏元素从具有计算坐标的绝对定位更改为固定定位。

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

Answer 5

您描述的效果通常会以某种类型的动画开始，就像 TheDeveloper 的答案一样。默认动画通常通过随着时间的推移改变元素的位置来滑动元素，或者通过改变元素的不透明度等来淡入/淡出元素。

获得“弹回”或“捕捉到”效果通常涉及缓动。所有主要框架都提供某种形式的缓动。这完全取决于个人喜好；他们中的任何一个都不会出错。

jQuery 有 缓动插件，您可以将其与 .animate() 函数，或者您可以使用 jQueryUI。

MooTools 在核心库的 FX 类中内置缓动。

Yahoo 的 YUI 还具有内置缓动。

如果您还记得它是什么网站，您可以随时再次访问它并查看其源代码以了解使用的框架和效果。