<body>
<div class="main">
<!--头部灰色背景空盒子-->
<div class="maintop"></div>
<!--装每个阶级的盒子-->
<div id="mela" class="section">
<h2>1F男装</h2>
<ul></ul>
</div>
<div id="famela" class="section">
<h2>2F女装</h2>
<ul></ul>
</div>
<div id="Beauty" class="section">
<h2>3F美妆</h2>
<ul></ul>
</div>
<div id="three" class="section">
<h2>4F数码</h2>
<ul></ul>
</div>
<div id="electric" class="section">
<h2>5F电器</h2>
<ul></ul>
</div>
</div>
<!--右边固定的阶级盒子-->
<div class="rightfix">
<a href="#mela" >1F男装</a>
<a href="#famela">2F女装</a>
<a href="#Beauty">3F美妆</a>
<a href="#three">4F数码</a>
<a href="#electric">5F电器</a>
</div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
for(i=0;i<9;i++){//循坏在ul插入图片
$("ul").append("<li><img src='img/8.jpg'/></li>");
}
$('a').click(function(ev){
//判断当前是否有动画在执行
!$('html').is(':animated')?$('html').animate({scrollTop: ($($(this).attr('href')).offset().top +1)},400):'';
ev.preventDefault();
})
$(window).on('scroll',function(){
var topHei=$(window).scrollTop();
$.each($('.section'),function(index,item){
//判断滚动条滚动高度大于哪个盒子就让相应的盒子加上相应的样式
topHei>=$('.section').eq(index).offset().top?$('a').eq(index).addClass('active').siblings('a').removeClass('active'):'';
})
})
</script>
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
