如何更改纳米棒装载线的位置？

Question

我主要使用Nanobar JavaScript加载线。每次网站加载时，都会在网站顶部放置一条加载线。我想把它放在导航的底部。

在nanobar教程中说：

  

target <DOM Element> ：（可选）将进度条放置在文档顶部的 nanobar 位置，如果没有通过target

因此，我创建了nanobarcss并将其放在导航末尾，但是似乎没有任何变化，nanobar仍然保留在页面顶部。我还尝试了更改顶部边距，它确实使条形降低，但是每次以不同的分辨率更改时，它都会改变，因此它不会在导航栏的末尾固定。

我在导航栏的底部添加了nanobarcss div，但它不能解决问题。

这是我的代码：

(function(root) {
  'use strict'
  // container styles
  var css = '.nanobar{width:100%;height:4px;top:0;z-index:9999;}.bar{width:0;height:100%;transition:height .3s;background:#fff}'

  // add required css in head div
  function addCss() {
    var s = document.getElementById('nanobarcss')

    // check whether style tag is already inserted
    if (s === null) {
      s = document.createElement('style')
      s.type = 'text/css'
      s.id = 'nanobarcss'
      document.head.insertBefore(s, document.head.firstChild)
      // the world
      if (!s.styleSheet) return s.appendChild(document.createTextNode(css))
      // IE
      s.styleSheet.cssText = css
    }
  }

  function addClass(el, cls) {
    if (el.classList) el.classList.add(cls)
    else el.className += ' ' + cls
  }

  // create a progress bar
  // this will be destroyed after reaching 100% progress
  function createBar(rm) {
    // create progress element
    var el = document.createElement('div'),
      width = 0,
      here = 0,
      on = 0,
      bar = {
        el: el,
        go: go
      }

    addClass(el, 'bar')

    // animation loop
    function move() {
      var dist = width - here

      if (dist < 0.1 && dist > -0.1) {
        place(here)
        on = 0
        if (width >= 100) {
          el.style.height = 0
          setTimeout(function() {
            rm(el)
          }, 300)
        }
      } else {
        place(width - dist / 4)
        setTimeout(go, 16)
      }
    }

    // set bar width
    function place(num) {
      width = num
      el.style.width = width + '%'
    }

    function go(num) {
      if (num >= 0) {
        here = num
        if (!on) {
          on = 1
          move()
        }
      } else if (on) {
        move()
      }
    }
    return bar
  }

  function Nanobar(opts) {
    opts = opts || {}
    // set options
    var el = document.createElement('div'),
      applyGo,
      nanobar = {
        el: el,
        go: function(p) {
          // expand bar
          applyGo(p)
          // create new bar when progress reaches 100%
          if (p >= 100) {
            init()
          }
        }
      }

    // remove element from nanobar container
    function rm(child) {
      el.removeChild(child)
    }

    // create and insert progress var in nanobar container
    function init() {
      var bar = createBar(rm)
      el.appendChild(bar.el)
      applyGo = bar.go
    }

    addCss()

    addClass(el, 'nanobar')
    if (opts.id) el.id = opts.id
    if (opts.classname) addClass(el, opts.classname)

    // insert container
    if (opts.target) {
      // inside a div
      el.style.position = 'relative'
      opts.target.insertBefore(el, opts.target.firstChild)
    } else {
      // on top of the page
      el.style.position = 'fixed'
      document.getElementsByTagName('body')[0].appendChild(el)
    }

    init()
    return nanobar
  }

  if (typeof exports === 'object') {
    // CommonJS
    module.exports = Nanobar
  } else if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define([], function() {
      return Nanobar
    })
  } else {
    // Browser globals
    root.Nanobar = Nanobar
  }
}(this))

<script>
  var options = {
    target: document.getElementById('nanobarcss')
  };

  var nanobar = new Nanobar(options);

  // move bar
  nanobar.go(100);
  nanobar.go(100);
  nanobar.go(100);
</script>