scss 应用词缀javscript代码和scss样式

Posted 2021-05-17

$(document).ready(function() {
  var target = $("article.article .content-sections-list");
  target.after(
    '<div class="content-sections-list--affix affix" id="content-sections-list--affix"></div>'
  );

  var affix = $(".affix");
  affix.append(target.clone(true));

  var header = $("header.header");
  let headerBottom =
    header[0].getBoundingClientRect()["top"] +
    header[0].getBoundingClientRect()["height"];

  let container = $('main .container');
  let article = $("article.article");
  let space = 0;
  let margin = ($(window).width() - container.width()) / 2;
  let height = 0;

  let toolbarHeight = $("#toolbar-bar").height();
  let horizontalToolbarTrayHeight = $("#toolbar-bar .toolbar-tray-horizontal.toolbar-tray.is-active").height();
  let verticalToolbarTrayWidth = $("#toolbar-bar .toolbar-tray-vertical.toolbar-tray.is-active").width();

  // Show affix on scroll.
  var element = document.getElementById("content-sections-list--affix");
  if (element !== null) {
    let targetTop = findPos(target[0])[1];

    window.addEventListener("resize", function() {
      headerBottom =
        header[0].getBoundingClientRect()["top"] +
        header[0].getBoundingClientRect()["height"];

      targetTop = findPos(target[0])[1];

      margin = ($(window).width() - container.width()) / 2;

      toolbarHeight = $("#toolbar-bar").height();
      horizontalToolbarTrayHeight = $(
        "#toolbar-bar .toolbar-tray-horizontal.toolbar-tray.is-active"
      ).height();

      verticalToolbarTrayWidth = $(
        "#toolbar-bar .toolbar-tray-vertical.toolbar-tray.is-active"
      ).width();
    });

    window.addEventListener("scroll", function() {
      targetTop = findPos(target[0])[1];
      height = $(window).scrollTop();
      if (header.css("position") == "fixed") {
        space = height + headerBottom;
      } else {
        space = height;
        if (typeof toolbarHeight !== "undefined") {
          space += toolbarHeight;
        }
        if (typeof horizontalToolbarTrayHeight !== "undefined") {
          space += horizontalToolbarTrayHeight;
        }
      }


      if (space > targetTop) {
        target.css("visibility", "hidden");
        affix.css("display", "block");
        if(header.css("position") == 'fixed') {
          affix.css("top", headerBottom);
        } else {
          let topPadding = 0;
          if (typeof toolbarHeight !== "undefined") {
            topPadding += toolbarHeight;
          }
          if (typeof horizontalToolbarTrayHeight !== "undefined") {
            topPadding += horizontalToolbarTrayHeight;
          }
          affix.css("top", topPadding);
        }
        if (typeof verticalToolbarTrayWidth !== "undefined") {
          margin = ($(window).width() + verticalToolbarTrayWidth - container.width()) / 2;
        }
        affix.css("width", article.width());
        affix.css("left", margin);
      } else {
        affix.css("display", "none");
        target.css("visibility", "visible");
      }
    });
  }

  // Notes for the findPos function:

  // * This does *not* work on objects with
  // position: fixed, as such objects don't
  // have offset parents!!!

  // * Be sure to feed target[0] into this,
  // rather than just target!!!
  function findPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      } while ((obj = obj.offsetParent));
      return [curleft, curtop];
    }
  }
});

.content-sections-list--affix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: none;
}