In-page anchor links vs. bootstrap's fixed navbar

@keynote2k was the first to point out that the in-page anchor links in
the Guide failed to function properly, due to Bootstrap's fixed navbar.

This mixed solution of CSS and Javascript is the best solution I've been
able to come up with for the problem.  The CSS solution is obviously
preferable, and is used herein for those anchor id attributes in the
Guide that have no href of their own.

Due to problems with using a pure CSS solution where the anchor includes
both an href and a id attribute.  The Javascript solution is specific
for those cases.  I took care not to have them both happen at once, as
they would undoubtedly conflict.

I did a inordinate amount of research about this issue.  Bootstrap's own
page about the fixed navbar:
   http://getbootstrap.com/examples/navbar-fixed-top/

doesn't discuss this issue at all, but there is a bug in Booststrap's
 bugtracker:
     https://github.com/twitter/bootstrap/issues/1768

which discusses the issue.  (However, I don't understand why that bug is
closed, since none of the solutions I implement herein truly solve it).

The most useful page I found regarding this issue is this one:
  http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo

which offers several pure CCS solutions (each with drawbacks and
advantages).  Unfortunately, none of those solutions consider the
question of anchor links that have both href and id attributes, and none
of them work properly in that situation.

css/guide.css

@@ -107,3 +107,34 @@ body {
     border-radius: 0px;
     color: #c7254e;
 }
+/* Handle issues with anchor in-page links offsets due to bootstrap's */
+/* fixed top navbar.  For  in-page anchor links, the fixed navbar at  */
+/* the top obscures the text of the link that's jumped to.            */
+/* Most of the pure CSS solutions found online cannot handle the      */
+/* situation where you have an anchor with both href and id           */
+/* attributes.  This seemed the best one for use in cases where       */
+/* there was is no href. in the anchor which included the id.         */
+
+.likesectionHead a[id],
+.subsectionHead a[id],
+.likesubsectionHead a[id],
+.partHead a[id],
+.likepartHead a[id],
+.appendixHead a[id],
+.likeappendixHead a[id],
+.chapterHead a[id],
+.likechapterHead a[id],
+.sectionHead a[id] {
+    border-top: 75px solid transparent;
+    margin-top: -75px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+/* Note that those anchors that contain both href and id cannot be     */
+/* handled this way.  It casuses strange problems with the href links. */
+/* The specific problem is that you get a 75px offset when the         */
+/* mousepointer activates the link, and the tooltip on the footnotes   */
+/* don't work.  Therefore, the following classes are handled by the    */
+/* Javascript rather than CSS:                                         */
+/*    chapterToc, sectionToc, subsectionToc, partToc, footnote-mark    */

js/tex4ht-footnote-hack.js

@@ -1,5 +1,6 @@
-//  Released as CC0: http://creativecommons.org/publicdomain/zero/1.0/
+//  The code below is released as CC0:
-//   by Bradley M. Kuhn <bkuhn@ebb.org>
+//   http://creativecommons.org/publicdomain/zero/1.0/ by
+//     Bradley M. Kuhn <bkuhn@ebb.org>
 
 $(function() {
 $( ".footnote-mark" ).tooltip({
@@ -25,9 +26,41 @@ $( ".footnote-mark" ).tooltip({
         }
     }});
 });
+// ####################################################################
 // The following code was borrowed from:
 // https://github.com/pierre-rouanet/sphinxjp.themes.basicstrap/commit/05ac6055be8cbb6097f16ab106df5244c19a067f
-// which was licensed under the MIT license.
+// which was licensed under the permissive MIT license.
+
+// and modified by Bradley M. Kuhn, (C) 2014, also permissive MIT license'd:
+
+//    Permission is hereby granted, free of charge, to any person obtaining a
+//    copy of this software and associated documentation files (the
+//    "Software"), to deal in the Software without restriction, including
+//    without limitation the rights to use, copy, modify, merge, publish,
+//    distribute, sublicense, and/or sell copies of the Software, and to
+//    permit persons to whom the Software is furnished to do so, subject to
+//    the following conditions:
+
+//       The above copyright notice and this permission notice shall be
+//       included in all copies or substantial portions of the Software.
+
+//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+//    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+//    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+//    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+//    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+//    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+//    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+// This below code is designed to handle the proper handling of in-page
+// anchor offsets.  Specifically, it handles only those in-page anchors which
+// have both an href and id attribute to correct for the issue of the a fixed
+// bootstrap navbar header which by default causes in-page anchor offsets to
+// be obscured by the top navbar.
+
+// This Javascript solution is not as preferable as the pure CSS solution, so
+// the pure CSS solution is used for those anchors which have no href
+// attribute.
 
 $(window).load(function () {
     /*
@@ -35,10 +68,13 @@ $(window).load(function () {
      * https://github.com/twitter/bootstrap/issues/1768
      */
     if ($(".navbar.navbar-fixed-top").length > 0) {
-        // var navHeight = $(".navbar").height(),
+        var navHeight = $(".navbar").height(),
-        var navHeight = 40,
+            shiftWindow = function() {
-            shiftWindow = function() { scrollBy(0, -navHeight - 10); };
+                var ourURL = document.URL;
-
+                if ( (ourURL.search("#fn") > 0) || (ourURL.search("#QQ") > 0)) {
+                    scrollBy(0, -navHeight - 5);
+                }
+            };
         if (location.hash) {
             setTimeout(shiftWindow, 1);
         }