导航效果2

const ACTIVE_CLASS = 'active'
const SCROLL_CLASS = 'NavComponent-scroll'

// 顶部导航部件
export function NavComponent() {
let banner = $('.NavComponent')
let navList = $('.NavComponent-banner > ul')
let navLogo = $('.NavComponent-logo')

let slider = $('.NavComponent-slider')
let sliderItem = $('.NavComponent-slider > div')
let sliderItemLock = $('.NavComponent-slider > div.locklist')
let sliding = false
let sliderId
let scroll = 0

this.init = function() {

setActive()

$(window).scroll(() => {
if($(window).scrollTop() == 0) {
banner.removeClass(SCROLL_CLASS)
} else {
if(!banner.hasClass(SCROLL_CLASS)) {
banner.addClass(SCROLL_CLASS)
}
}

// if($(window).scrollTop() > scroll) {
// if(!banner.hasClass(SCROLL_CLASS)) {
// banner.addClass(SCROLL_CLASS)
// }
// } else {
// if(banner.hasClass(SCROLL_CLASS)) {
// banner.removeClass(SCROLL_CLASS)
// }
// }
// scroll = $(window).scrollTop()
})

$('.NavComponent-banner ul li a').hover(
function() {
sliderId = $(this).attr('data-id')
slideDown(sliderId)
}
)
//调试注释
$('.NavComponent').hover(
() => {},
() => {
if(!sliding) {
sliding = true
slider.slideUp('fast', () => {
sliding = false
})
}
}
)

$('#wechat-link').hover(function(){$('#wechat-qr').stop().fadeIn();}, function(){$('#wechat-qr').stop().fadeOut();})

}

function setActive() {

let pathname = window.location.pathname
let path = window.location.pathname

if(path.indexOf('more') != -1 || path.indexOf('news/brand') != -1 || path.indexOf('news/view') != -1) {
path = 'more'
} else if (path.indexOf('service') != -1) {
path = 'service'
} else if (path.indexOf('products') != -1) {
path = 'products'
} else if (path.indexOf('homeSafety') != -1 || path.indexOf('usercase') != -1 || path.indexOf('reservation') != -1) {
path = 'homeSafety'
} else {
path = 'homepage'
}

$('.NavComponent-banner ul li a').each((k, v) => {
if($(v).attr('data-id') == path) {
$(v).addClass(ACTIVE_CLASS)
}
})

$('.NavComponent-slider a').each((k, v) => {
if($(v).attr('href') == pathname) {
$(v).addClass(ACTIVE_CLASS)
}
})

}

function slideDown(id) {

if(!id) {
return
}

// let slider = $('.NavComponent-slider')
// let sliderItem = $('.NavComponent-slider > div')

let offsetLeftLock = navLogo.offset().left;
let offsetLeftOther = navList.offset().left

sliderItem.css('marginLeft', offsetLeftOther);
sliderItemLock.css('marginLeft', offsetLeftLock);
if(id == 'homepage' || id == 'news' || id == 'tianmao') {

slider.slideUp('fast', () => {
sliding = false
})

return
}

sliderItem.each((k, v) => {
v = $(v)
if(v.attr('data-id') == id) {
v.show()
} else {
v.hide()
}
})

slider.slideDown()
}
}