然后滚动到顶部

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

你会经常看到这种类似于 "浮动几乎固定位置垂直工具栏"的东西,例如在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的方法,但遇到了浏览器调整大小和缩放问题. 花了一些时间来了解如何正确地做出反应以及如何在init没有jQuery或任何其他库的情况下重置初始位置().

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

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

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