Question

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

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的方法，但遇到了关于浏览器调整大小和缩放的问题。我花了一些时间来了解如何正确地做出反应以及如何重置初始位置（{{ 1}}）没有jQuery或任何其他库。

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

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

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

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

init

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

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();
};

Answer 4

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

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

Answer 5

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

获得“回归”或“突然”效应通常会导致缓和。所有主要框架都有某种形式的宽松政策。这完全取决于个人喜好;你不能真的出错任何一个。

jQuery有easing plugins您可以使用.animate()功能，或者您可以使用jQueryUI。

MooTools对核心库的FX类有easing built in。

雅虎的YUI也有easing built in。

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

然后滚动到顶部

5 个答案:

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

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