jQuery 电梯导航

[月夕+]

滚动滚轮时 怎末让导航跟着变不同颜色 划入点击都可以，帮忙看下我是有点懵了，难道思路错了？


$(function() {
var fa = true;
var top = $('.actv').offset().top;
var top1 = $('.con').offset().top;
$('body,html').stop().animate({
scrollTop: 0
})
togg();

function togg() {
if ($(document).scrollTop() >= top1) {
$('.daohangl').slideDown(100);
} else {
$('.daohangl').slideUp(300);
}
if ($(document).scrollTop() >= top) {
$('.dianti').fadeIn(100);
} else {
$('.dianti').fadeOut(300);
}
}
// 滚动 让导航里面每个小板块变不同的颜色
$(window).scroll(function() {
togg();
if (fa) {
$('.eq').each(function(i, e) {
if ($(document).scrollTop() >= $(e).offset().top) {



}
})
}
})
// 点击返回顶部
$('.bctl').on('click', function() {
$('body,html').stop().animate({
scrollTop: 0
});
})
// 点击跳转到不同板块
$('.diant1').on('click', function() {
fa = false;
var index = $(this).index();
var cont = $('.eq').eq(index).offset().top;
$('body,html').stop().animate({
scrollTop: cont + -50,
}, function() {
fa = true;
})
var as = ['#DC143C', '#FF8C00', 'deeppink', 'burlywood', 'goldenrod', '#FF0036']
$('.diant1').eq(index).each(function(i, d) {
i = index;
$(d).css('backgroundColor', as[i])
$(d).siblings().css({
backgroundColor: 'black',
opacity: 0.6
})
})
})
// 划入让每个小板块变不同颜色
$('.diant1').hover(function(){
var index = $(this).index()
var as = ['#DC143C', '#FF8C00', 'deeppink', 'burlywood', 'goldenrod', '#FF0036']
$('.diant1').eq(index).each(function(i, d) {
i = index;
$(d).css('backgroundColor', as[i])
$(d).siblings().css({
backgroundColor: 'black',
opacity: 0.6
})
})
})
})

[浴火_凤凰]

没有HTML部分的代码啊

[月夕+]

引用 1 楼 浴火_凤凰 的回复:

没有HTML部分的代码啊

我给简化了一下 大概就这个意思 <div class="ftmt eq"> 1 </div> <div class="kuwan eq"> 2 </div> <div class="kuwan eq"> 3 </div> <div class="kuwan eq"> 4 </div> <div class="kuwan eq"> 5 </div> <div class="btc eq"> 6 </div> <div class="dianti"> <div style="width: 36px; height: 36px;color: #fff; cursor: pointer; margin-top: 1px; background-color: red; overflow: hidden; font-size: 13px; text-align: center; display: table-cell; vertical-align: middle; ">导航</div> <div class="eq"> <div class="diant1">天猫国际</div> <div class="diant1">潮电酷玩</div> <div class="diant1">居家生活</div> <div class="diant1">美丽人生</div> <div class="diant1">户外出行</div> <div class="diant1">猜你喜欢</div> </div> <div class="bctl">顶部</div> </div> .dianti { width: 35px; height: 369px; position: fixed; left: 13%; top: 40%; } .diant1 { width: 30px; height: 30px; padding: 3px; font-size: 12px; text-align: center; overflow: hidden; background-color: #000; opacity: 0.6; color: #fff; margin-top: 1px; cursor: pointer; } .bctl { width: 36px; height: 36px; color: #fff; cursor: pointer; margin-top: 1px; background-color: #ccc; overflow: hidden; font-size: 13px; text-align: center; display: table-cell; vertical-align: middle; } .ftmt { width: 1180px; height: 668px; overflow: hidden; margin: auto; margin-bottom: 10px; font-size: 30px; font-weight: 900; text-align: center; } .kuwan { font-size: 30px; font-weight: 900; text-align: center; width: 1180px; height: 648px; margin: 0 auto; margin-bottom: 10px; } .btc { font-size: 30px; font-weight: 900; text-align: center; width: 1180px; height: 319px; margin: auto; }