滾動滾輪時 怎末讓導航跟著變不同顏色 劃入點擊都可以，幫忙看下我是有點懵了，難道思路錯了？
$(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
})
})
})
})
uj5u.com熱心網友回復：
沒有HTML部分的代碼啊uj5u.com熱心網友回復：
我給簡化了一下 大概就這個意思
<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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/33601.html
標籤：JavaScript
上一篇：php接收前端傳來的json