gistfile1.js

define(function(){
  return Backbone.View.extend({
    el: "#bone-navigation",
    
    events: {
      "click a.toggle" : "toggleView"
    },
    
    initialize: function(){
      _.bindAll(this, "toggleView", "windowScroll", "windowResize");
      $(window).bind("scroll", this.windowScroll);
      $(window).bind("resize", this.windowResize);
      this.initNavigationTop();
    },
    
    toggleView: function(e){
      e.preventDefault();
      
      console.log("Toggle View");
      $(e.target).toggleClass("grid");
    },
    
    initNavigationTop: function(){
      var element = $(this.el);
      element.data("topPosition", element.position().top);
      this.setWidth();
    },
    
    setWidth: function(){
      var element = $(this.el);
      element.css('width', $('.documents-list').width());
    },
   
    windowResize: function(){
      this.setWidth();
    },
   
    windowScroll: function(e){
      var element = $(this.el), elementOffset = $(this.el).data("topPosition"), scrollTrigger = $(window).scrollTop();
      
      if(elementOffset < scrollTrigger && element.css("position") !== "fixed"){
        element.css({
          "position": "fixed",
          "top" : 0
        });
      } else if(elementOffset > scrollTrigger && element.css("position") === "fixed"){
        element.css({
          "position": "absolute",
          "top" : elementOffset
        });
      }
    }
  });
});