scroll then snap to top

问题:

Just wondering if anyone has an idea as to how I might re-create a nav bar style that I saw a while ago, I just found the site I saw it on, but am not sure how they might have gotten there. Basically want it to scroll with the page then lock to the top...

http://lesscss.org/

回答1:

Just do a quick "view source" on http://lesscss.org/ and you'll see this:

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

They're binding to the onscroll event for the window, this event is triggered when the window scrolls. The docked flag is set to true when the menu is "locked" to the top of the page, the menu is set to position:fixed at the same time that that flag is set to true. The rest is just some simple "are we about to scroll the menu off the page" and "are we about back where we started" position checking logic.

You have to be careful with onscroll events though, they can fire a lot in rapid succession so your handler needs to be pretty quick and should precompute as much as possible.

In jQuery, it would look pretty much the same:

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

You see this sort of thing quite often with the "floating almost fixed position vertical toolbar" things such as those on cracked.com.

回答2:

mu is too short answer is working, I'm just posting this to give you the jquery script!

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

回答3:

Mu's answer got me far. I tried my luck with replicationg lesscss.org's approach but ran into issues on browser resizing and zooming. Took me a while to find out how to react to that properly and how to reset the initial position (init) without jQuery or any other library.

Find a preview on JSFiddle: http://jsfiddle.net/ctietze/zeasg/

So here's the plain JavaScript code in detail, just in case JSFiddle refuses to work.

---

Reusable scroll-then-snap menu class

Here's a reusable version. I put the scrolling checks into a class because the helper methods involved cluttered my main namespace:

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

Handle zoom/page resize events

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

回答4:

Sounds like an application of Jquery ScrollTop and some manipulation of CSS properties of the navbar element. So for example, under certain scroll conditions the navbar element is changed from absolute positioning with calculated co-ordinates to fixed positioning.

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

回答5:

The effect you describe would usually start with some type of animation, like in TheDeveloper's answer. Default animations typically slide an element around by changing its position over time or fade an element in/out by changing its opacity, etc.

Getting the "bouce back" or "snap to" effect usually involves easing. All major frameworks have some form of easing available. It's all about personal preference; you can't really go wrong with any of them.

jQuery has easing plugins that you could use with the .animate() function, or you can use jQueryUI.

MooTools has easing built in to the FX class of the core library.

Yahoo's YUI also has easing built in.

If you can remember what site it was, you could always visit it again and take a look at their source to see what framework and effect was used.