Fixed scroll shadows not appearing

Implemented scroll classes into a jQuery plugin and fixed shadows not appearing when scrolled

assets/lib/jquery-utils.js

@@ -83,6 +83,34 @@
         return 0;
     };
 
+    // ## scrollShadow
+    // This adds a 'scroll' class to the targeted element when the element is scrolled
+    // **target:** The element in which the class is applied. Defaults to scrolled element.
+    // **class-name:** The class which is applied.
+    // **offset:** How far the user has to scroll before the class is applied.
+    $.fn.scrollClass = function (options) {
+        var config = $.extend({
+                'target'     : '',
+                'class-name' : 'scrolling',
+                'offset'     : 1
+            }, options);
+
+        return this.each(function () {
+            var $this = $(this),
+                $target = $this;
+            if (config.target) {
+                $target = $(config.target);
+            }
+            $this.scroll(function () {
+                if ($this.scrollTop() > config.offset) {
+                    $target.addClass(config['class-name']);
+                } else {
+                    $target.removeClass(config['class-name']);
+                }
+            });
+        });
+    };
+
     $.fn.selectText = function () {
         var elem = this[0],
             range,

views/blog.js

@@ -4,16 +4,7 @@
 
     var ContentList,
         ContentItem,
-        PreviewContainer,
-
-        // Add shadow during scrolling
-        scrollShadow = function (target, e) {
-            if ($(e.currentTarget).scrollTop() > 10) {
-                $(target).addClass('scrolling');
-            } else {
-                $(target).removeClass('scrolling');
-            }
-        };
+        PreviewContainer;
 
     // Base view
     // ----------
@@ -34,7 +25,7 @@
         },
 
         initialize: function (options) {
-            this.$('.content-list-content').on('scroll', _.bind(scrollShadow, null, '.content-list'));
+            this.$('.content-list-content').scrollClass({target: '.content-list', offset: 10});
             this.listenTo(this.collection, 'remove', this.showNext);
         },
 
@@ -129,7 +120,6 @@
 
         initialize: function (options) {
             this.listenTo(Backbone, 'blog:activeItem', this.setActivePreview);
-            this.$('.content-preview-content').on('scroll', _.bind(scrollShadow, null, '.content-preview'));
         },
 
         setActivePreview: function (id) {
@@ -201,6 +191,7 @@
                 this.model = this.collection.get(this.activeId);
                 this.$el.html(this.template(this.templateData()));
             }
+            this.$('.content-preview-content').scrollClass({target: '.content-preview', offset: 10});
             this.$('.wrapper').on('click', 'a', function (e) {
                 $(e.currentTarget).attr('target', '_blank');
             });

views/editor.js

@@ -256,23 +256,9 @@
 
             this.$('.CodeMirror-scroll').on('scroll', this.syncScroll);
 
-            // Shadow on Markdown if scrolled
-            this.$('.CodeMirror-scroll').on('scroll', function (e) {
-                if ($('.CodeMirror-scroll').scrollTop() > 10) {
-                    $('.entry-markdown').addClass('scrolling');
-                } else {
-                    $('.entry-markdown').removeClass('scrolling');
-                }
-            });
+            this.$('.CodeMirror-scroll').scrollClass({target: '.entry-markdown', offset: 10});
+            this.$('.entry-preview-content').scrollClass({target: '.entry-preview', offset: 10});
 
-            // Shadow on Preview if scrolled
-            this.$('.entry-preview-content').on('scroll', function (e) {
-                if ($('.entry-preview-content').scrollTop() > 10) {
-                    $('.entry-preview').addClass('scrolling');
-                } else {
-                    $('.entry-preview').removeClass('scrolling');
-                }
-            });
 
             // Zen writing mode shortcut
             shortcut.add("Alt+Shift+Z", function () {