滚动条滚动事件 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(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
随机推荐
- node开发 npm install -g express-generator@4
Node forever : 1,forever start --uid test start app.js 2,forever start --uid test start -a app.js 3, ...
- 【个人使用.Net类库】前言
个人接触.Net是在2013年8月份到了一家新的公司开始的. 目前为止,发现自己的知识储备如下: 基本的WinForm编程,但没做过对应项目. 基本的Asp.Net页面,做过查询.树形菜单.登录的小功 ...
- Spring对jdbc的支持
Spring对jdbc技术提供了很好的支持. 体现在: 1)Spring对c3p连接池的支持很完善: 2)Spring对jdbc提供了JdbcTemplate,来简化jdbc操作: 1.使用步骤 1) ...
- Quartz2D
http://donbe.blog.163.com/blog/static/138048021201052093633776/ 详解 代码如下: DJView 绘制线段 基本图形 // // DJVi ...
- Spring学习笔记之bean配置
1.命名bean 每个bean都有一个或者多个的的标识符.这些标识符必须在加载他们的容器里边唯一.一个bean经常有且只有一个标识符,但是如果需要超过一个的名字,可以考虑额外的别名. 基于xml的配置 ...
- Andoid activity 生命周期
今天介绍一下Android中最常用的组件activity的生命周期.当activity处于Android应用中运行时,它的活动状态由Android以Activity栈的形式管理.当前活动的Activi ...
- vs2013的使用和单元测试
我的vs2013是之前就安装好的,安装过程就不介绍了,我平常编写代码就是用的vs2013,用起来还是很方便的,现在我们就开始使用vs2013进行单元测试 首先我们建立一个项目,项目中选择virtual ...
- Python Web 应用:WSGI基础
在Django,Flask,Bottle和其他一切Python web 框架底层的是Web Server Gateway Interface,简称WSGI.WSGI对Python来说就像 Servle ...
- httplib、urllib、urllib2的区别
Python3.4互联网通讯协议支持 1,webbrowser方便的浏览器容器 2,cgi公共网关接口支持 3,cgitb管理cgi脚本 4,wsgiref WSGI实体和引用实现 5,urlli ...
- android 单选、多选弹出菜单
菜单单选窗口: import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInte ...