<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的更多相关文章

  1. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  2. 关于如何使用javascript监听滚动条滚动事件

    在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它 Html代码: <a id="scrollup" href="#top" style=&quo ...

  3. window.onscroll页面滚动条滚动事件

    用途一:"返回顶部": window.onscroll = function(){ var t = document.documentElement.scrollTop || do ...

  4. 滚动条响应鼠标滑轮事件实现上下滚动的js代码

    <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...

  5. js 滚动条滚动到底部触发事件

    一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...

  6. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  8. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  9. js判断用户是否正在滚动滚动条,滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

随机推荐

  1. pthread_create如何传递两个参数以上的参数

    涉及多参数传递给线程的,都需要使用结构体将参数封装后,将结构体指针传给线程 定义一个结构体 struct mypara { var para1;//参数1 var para2;//参数2 } 将这个结 ...

  2. 二模 (2) day1

    第一题: 题目描述:淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2n-1,2n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加该轮的选手按标号从小到大排序后,第1位与第2位比 ...

  3. set常见操作:

    (1)sadd 向一个集合中添加一个元素.例如:sadd set1 Hello (2)smembers 查看集合中的所有元素.例如:smembers set1 (3)srem 删除集合中一个指定的元素 ...

  4. Oracle性能调优

    这部分目前主要是从网上搜集来的,后续要在实践中慢慢体会. v$sqltext: 存储的是被分割的sql v$sqlarea: 存储的是完整的sql和一些统计信息,比如累计的执行次数.逻辑读.物理读等( ...

  5. IT公司100题-1-二叉树转换为双链表

    问题描述: 输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表.要求不能创建任何新的结点,只调整指针的指向. 10   /   \  6      14/  \    /   \4   8 1 ...

  6. C++中两块内存重叠的string的copy方法

    如果两段内存重叠,用memcpy函数可能会导致行为未定义. 而memmove函数能够避免这种问题,下面是一种实现方式: #include <iostream> using namespac ...

  7. Unity开发Android应用程序:调用安卓应用程序功能

    开发环境: Eclipse3.4 + adt12 + jdk6 + AndroidSDK2.2 Unity3.4 + windows7 测试设备: HTC Desire HD 本文要涉及到的几个重点问 ...

  8. office2013不能正常使用

    感觉非常卡一样 还不能显示内容 工具栏也点不动   这个应该是Office硬件图形加速惹得祸,解决办法: 文件>选项>高级>显示,找到“禁用硬件图形加速”在前面打勾,关闭再打开就OK ...

  9. HYSBZ 1415 - 聪聪和可可(概率DP)

    http://vjudge.net/problem/viewProblem.action?id=20613 题意:不用说了,中文题. 这个题可以用概率DP来做. 题中要求猫抓到老鼠的时间期望.分析一下 ...

  10. C#注册表常用操作

    1:加键 改值 Microsoft.Win32.RegistryKey Key = Microsoft.Win32.Registry.CurrentUser.CreateSubKey( @" ...