滚动条滚动事件 js
<div class="xiangxix">
<ul>
<li class="xxfangwen"><a href="#sjwz">商家位置</a></li>
<li><a href="#gmxz">购买须知</a></li>
<li><a href="#bdxq">本单详情</a></li>
<!-- <li><a href="#detail">商家详情</a></li>-->
<li><a href="#xfpj">消费评价(12)</a></li>
</ul>
</div>
<script type="text/javascript">
$(window).scroll(function() {
var thisscroll = $(window).scrollTop();
if( thisscroll>= 600 ){
$(".xiangxix").addClass("fixedxiangxix");
$(".xiangxix").addClass("container");
}else{
$(".xiangxix").removeClass("fixedxiangxix");
$(".xiangxix").removeClass("container");
}
var list1 = $("#sjwz").offset().top - 40;
var list2 = $("#gmxz").offset().top - 40;
var list3 = $("#bdxq").offset().top - 40;
var list4 = $("#xfpj").offset().top - 40;
if(thisscroll < list2){
$(".xiangxix ul li").removeClass("xxfangwen");
$(".xiangxix ul li:eq(0)").addClass('xxfangwen');
}
if(thisscroll >= list2 && thisscroll < list3){
$(".xiangxix ul li").removeClass("xxfangwen");
$(".xiangxix ul li:eq(1)").addClass('xxfangwen');
}
if(thisscroll >= list3 && thisscroll < list4){
$(".xiangxix ul li").removeClass("xxfangwen");
$(".xiangxix ul li:eq(2)").addClass('xxfangwen');
}
if(thisscroll >= list4){
$(".xiangxix ul li").removeClass("xxfangwen");
$(".xiangxix ul li:eq(3)").addClass('xxfangwen');
}
})
$(".xiangxix ul li a").click(function(){
if(!$('html,body').is(":animated")){
var thisscrll = $($(this).attr("href")).offset().top - 40;
$('html,body').animate({scrollTop:thisscrll+'px'}, 300);
}
return false;
})
</script>
<div class="qitatg shagnjiaweizhi">
<a name="sjwz" id="sjwz">
</a>
</div>
<div class="qitatg shagnjiaweizhi">
<a name="gmxz" id="gmxz">
</a>
</div>
<div class="qitatg shagnjiaweizhi" name="bdxq" id="bdxq">
</div>
.fixedxiangxix{
position:fixed;
top:0px;
width:auto;
z-index:99999;
margin:0px auto
}
.fixedxiangxix ul {
display:block;
width:98%;
background:#fff;
}
滚动条滚动事件 js的更多相关文章
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- 关于如何使用javascript监听滚动条滚动事件
在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它 Html代码: <a id="scrollup" href="#top" style=&quo ...
- window.onscroll页面滚动条滚动事件
用途一:"返回顶部": window.onscroll = function(){ var t = document.documentElement.scrollTop || do ...
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
- js 滚动条滚动到底部触发事件
一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
- js判断用户是否正在滚动滚动条,滚动条滚动是否停止
js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
随机推荐
- UITableViewCell Property “icon” cannot be found in forward class object “DJWeiBo”
UITableViewCell 自定义表格 实体属性不显示错误 Property “icon” cannot be found in forward class object “DJWeiBo”引入实 ...
- Visual studio 2013安装及单元测试
vs安装过程 单元测试: 创建c#类库 创建单元测试 测试结果
- JS页面打印,预览,设置,分页
一)在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classi ...
- 关于Xcode调试的帖子,感觉不错,转来看看
http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-1 http://www.raywenderlich.com/10505 ...
- 笔记本安装Win2012R2 心得(包含无线网卡+有线网卡驱动解决方法)
笔记本:联想昭阳E47G 无线网卡安装方法: 系统安装完毕后将自动识别无线网卡驱动,但需要手动允许WLAN服务开启.(建议,如果是拿来办公或者家用,可以安装上桌面体验)不然,QQ发的截图双击都看不起. ...
- python常见错误总结
TypeError: 'module' object is not callable 模块未正确导入,层级关系没找对 缩进错误. IndentationError: unindent does not ...
- python练习——水仙花数
题目: 请判断一个数是不是水仙花数.其中水仙花数定义各个位数立方和等于它本身的三位数.输入有多组测试数据,每组测试数据以包含一个整数n(100<=n<1000)输入0表示程序输入结束.输出 ...
- WABAPI使用
最近写一个供其他系统调用的接口,决定使用wabapi,以前只是大概了解wabapi是什么东西,没有写过自己的api,从头开始学习. 1.开始创建一个webapi的项目,不得不说VS真的替我们省了好多事 ...
- python黑帽子源码
https://www.nostarch.com/download/BHP-Code.zip https://yunpan.cn/cPvLPWMTdWJRu 访问密码 4243
- 收藏的博客--Ogre
1.Ogre一些东西和流程深入讲解 http://blog.csdn.net/yanonsoftware/article/category/226048 2.Ogre天龙八部分析 http://bl ...