JQ楼层效果需改良左右两边定位问题

来源：互联网发布：彩无敌软件官网编辑：程序博客网时间：2024/04/26 17:41
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../../jq写轮播图/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$(window).scroll(function(){//获取下标为0离最上面的高度var Stop = $('.c').eq(0).offset().top;//获取滚动条离上面的高度var Ntop = $(window).scrollTop();if(Ntop >= Stop){$('.lou').show();}else{$('.lou').hide();}var Lnum = $('.c').length;for (var i = 0; i < Lnum - 1; i++) {//0号元素距离上面的距离var Lnum0 = $('.c').eq(i).offset().top;//0+1号元素距离上面的距离var Lnum1 = $('.c').eq(i+1).offset().top;if(Ntop+1 >= Lnum0 && Ntop < Lnum1){console.log(i);$('.lou ul li').eq(i).find('a').addClass('active');$('.lou ul li').eq(i).siblings('li').find('a').removeClass('active');}else if($('.c').eq(9).offset().top <=Ntop){$('.lou ul li a').eq(9).addClass('active');$('.lou ul li').eq(9).siblings('li').find('a').removeClass('active');}}})$('.lou ul li').click(function(){var num = $(this).index();var t = $('.c').eq(num).offset().top;$('body').stop().animate({'scrollTop':t},200)})})</script><style type="text/css">*{padding: 0;margin: 0;list-style: none;text-decoration: none;box-sizing: border-box;font-size: 12px;}.centent{width: 1000px;height: auto;border: 1px solid red;margin: 0 auto;}.top{width: 1000px;height: 600px;background: pink;}.c{width: 1000px;height: 300px;background: seagreen;border-bottom: 1px solid white;}.lou{position: fixed;top: 10px;left: 50px;width: 50px;height: auto;display: none;}.lou ul li{width: 100%;height: 50px;background: #918888;border-bottom: 1px solid white;}.lou ul li a{display: block;width: 100%;height: 50px;line-height: 50px;text-align: center;color: white;}.active{background: #D70B1C;}.lou ul li:hover{background: #D70B1C;}</style></head><body><div class="lou"><ul><li><a href="javascript:;">1</a></li><li><a href="javascript:;">2</a></li><li><a href="javascript:;">3</a></li><li><a href="javascript:;">4</a></li><li><a href="javascript:;">5</a></li><li><a href="javascript:;">6</a></li><li><a href="javascript:;">7</a></li><li><a href="javascript:;">8</a></li><li><a href="javascript:;">9</a></li><li><a href="javascript:;">10</a></li><li><a href="#tips">Top</a></li></ul></div><div class="centent"><div class="top" id='tips'>top</div><div class="c">1</div><div class="c">2</div><div class="c">3</div><div class="c">4</div><div class="c">5</div><div class="c">6</div><div class="c">7</div><div class="c">8</div><div class="c">9</div><div class="c">10</div><!--<div class="c">11</div>--><div class="top">bottom</div></div></body></html>
阅读全文
0 0
JQ楼层效果 需改良左右两边定位问题

JQ楼层效果需改良左右两边定位问题
