diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index 15e38d7644..68f5bdaf44 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -32,6 +32,37 @@ exports.focus_on = function (field_id) {
     $("#" + field_id).focus();
 };
 
+exports.message_viewport_info = function () {
+    // see also: effective_page_size()
+    // Return a structure that tells us details of the viewport
+    // accounting for fixed elements like the top navbar.
+    //
+    // The message_header is NOT considered to be part of the visible
+    // message pane, which should make sense for callers, who will
+    // generally be concerned about whether actual message content is
+    // visible.
+
+    var res = {};
+
+    res.top_hidden_height =
+        $("#top_navbar").height()
+        + $(".message_header").height();
+
+    res.bottom_hidden_height =
+        $("#compose").height();
+
+    res.visible_height =
+        viewport.height()
+        - res.top_hidden_height
+        - res.bottom_hidden_height;
+
+    res.visible_top =
+        viewport.scrollTop()
+        + res.top_hidden_height;
+
+    return res;
+};
+
 function effective_page_size() {
     // This function returns the height of the viewable portion of the
     // message pane, so it starts with the viewport height and
diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js
index eafd889c56..ee6f8d868d 100644
--- a/zephyr/static/js/zephyr.js
+++ b/zephyr/static/js/zephyr.js
@@ -437,10 +437,9 @@ function process_visible_unread_messages() {
     }
 
     var selected = current_msg_list.selected_message();
-    var top = viewport.scrollTop();
-    var height = viewport.height();
-    var bottom = top + height;
-    var middle = top + (height / 2);
+    var vp = ui.message_viewport_info();
+    var top = vp.visible_top;
+    var height = vp.visible_height;
 
     // Being simplistic about this, the smallest message is 30 px high.
     var selected_row = rows.get(current_msg_list.selected_id(), current_msg_list.table_name);