102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
// 浏览器判断
|
|
import Browser from './browser'
|
|
// fix hexo 不支持的配置
|
|
import Fix from './fix'
|
|
|
|
import Util from './util'
|
|
|
|
function isPathMatch(path, href) {
|
|
let reg = /\/|index.html/g
|
|
return (path.replace(reg, '')) === (href.replace(reg, ''))
|
|
}
|
|
|
|
function tabActive() {
|
|
let tabs = document.querySelectorAll('.js-header-menu li a')
|
|
let path = window.location.pathname
|
|
Array.prototype.forEach.call(tabs, function(tab, i){
|
|
if (isPathMatch(path, tab.getAttribute('href'))) {
|
|
tab.classList.add('active')
|
|
}
|
|
})
|
|
}
|
|
|
|
function getElementLeft(element) {
|
|
var actualLeft = element.offsetLeft
|
|
var current = element.offsetParent
|
|
while (current !== null) {
|
|
actualLeft += current.offsetLeft
|
|
current = current.offsetParent
|
|
}
|
|
return actualLeft
|
|
}
|
|
function getElementTop(element) {
|
|
var actualTop = element.offsetTop
|
|
var current = element.offsetParent
|
|
while (current !== null) {
|
|
actualTop += current.offsetTop
|
|
current = current.offsetParent
|
|
}
|
|
return actualTop
|
|
}
|
|
|
|
function scrollStop($dom, top, limit, zIndex, diff) {
|
|
let nowLeft = getElementLeft($dom)
|
|
let nowTop = getElementTop($dom) - top
|
|
|
|
if (nowTop - limit <= diff) {
|
|
let $newDom = $dom.$newDom
|
|
if (!$newDom) {
|
|
$newDom = $dom.cloneNode(true)
|
|
let parentNode = $dom.parentNode
|
|
if(parentNode.lastChild == $dom){ // 将新生成的节点插入到当前节点之后
|
|
parentNode.appendChild($newDom)
|
|
}else{
|
|
parentNode.insertBefore($newDom, $dom.nextSibling)
|
|
}
|
|
$dom.$newDom = $newDom
|
|
$newDom.style.position = 'fixed'
|
|
$newDom.style.top = (limit || nowTop) + 'px'
|
|
$newDom.style.left = nowLeft + 'px'
|
|
$newDom.style.zIndex = zIndex || 2
|
|
$newDom.style.width = '100%'
|
|
$newDom.style.color = '#fff'
|
|
}
|
|
$newDom.style.visibility = 'visible'
|
|
$dom.style.visibility = 'hidden'
|
|
} else {
|
|
$dom.style.visibility = 'visible'
|
|
let $newDom = $dom.$newDom
|
|
if ($newDom) {
|
|
$newDom.style.visibility = 'hidden'
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleScroll() {
|
|
let $overlay = document.querySelector('.js-overlay')
|
|
let $menu = document.querySelector('.js-header-menu')
|
|
scrollStop($overlay, document.body.scrollTop, -63, 2, 0)
|
|
scrollStop($menu, document.body.scrollTop, 1, 3, 0)
|
|
}
|
|
|
|
function bindScroll() {
|
|
document.querySelector('#container').addEventListener('scroll', (e) => {
|
|
handleScroll()
|
|
})
|
|
|
|
window.addEventListener('scroll', (e) => {
|
|
handleScroll()
|
|
})
|
|
handleScroll()
|
|
}
|
|
|
|
(function () {
|
|
if (Browser.versions.mobile && window.screen.width < 800) {
|
|
tabActive()
|
|
bindScroll()
|
|
}
|
|
})()
|
|
|
|
Util.addLoadEvent(function() {
|
|
Fix.init()
|
|
}) |