v1/javascripts/jquery.paramax.js at master · maxspeicher/v1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
(function(document, window, $) {

  $.fn.paramax = function(mode) {
    var $container = this;
    var $sections;

    var init = function() {
      $sections = $container.find('section');

      var count = $sections.length - 1;
      var offset = 0;

      $sections.each(function(i) {
        var $this = $(this);

        $this
          .attr('data-original-position', offset)
          .data('original-position', offset);

        if ($this.css('position') !== 'fixed') {
          $this.css({
            'position': 'absolute',
            'top': offset,
            'z-index': i
          });
        }

        $this.removeClass('last');

        if (i === count) {
          $this.addClass('last');
        }

        if ($this.attr('id')) {
          $this.removeAttr('id').removeAttr('name');
        }

        var id = $this.data('id');
        var $anchor = $('#' + id).length > 0 ? $('#' + id)
            : $('<a id="' + id + '" name="' + id + '" style="position: absolute"></a>').appendTo('body');

        $anchor.css('top', offset);

        offset += $this.outerHeight(true);
      });

      $container.height(offset);
    };

    // http://www.html5rocks.com/en/tutorials/speed/animations/
    var latestKnownScrollY = $(document).scrollTop();
    var ticking = false;

    var onScroll = function() {
      latestKnownScrollY = $(document).scrollTop();
      requestTick();
    };

    var requestTick = function() {
      if (!ticking) {
        requestAnimationFrame(updatePositions);
      }

      ticking = true;
    };

    var updatePositions = function() {
      // reset the tick so we can
      // capture the next onScroll
      ticking = false;

      var scrollTop = latestKnownScrollY;
      var wndHeight = $(window).height();

      $sections.each(function(i) {
        var $this = $(this);
        var elHeight = $this.outerHeight(true);
        var originalPos = $this.data('original-position');

        if (elHeight < wndHeight) {
          if (scrollTop >= originalPos && !$this.hasClass('last')) {
            $this.css({
              'bottom': '',
              'position': 'fixed',
              'top': 0
            });
          } else {
            $this.css({
              'bottom': '',
              'position': 'absolute',
              'top': originalPos
            });
          }
        } else {
          if (scrollTop + wndHeight >= originalPos + elHeight && !$this.hasClass('last')) {
            $this.css({
              'bottom': 0,
              'position': 'fixed',
              'top': ''
            });
          } else {
            $this.css({
              'bottom': '',
              'position': 'absolute',
              'top': originalPos
            });
          }
        }
      });
    };

    if (!mode) {
      init();
    } else if (mode === 'update') {
      init();
      updatePositions()

      return $container;
    }

    $(window).on('scroll', onScroll);

    return $container;
  };

})(document, window, jQuery);