滚动条滚动事件 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;
}

时间: 2024-10-12 01:07:23

滚动条滚动事件 js的相关文章

js 禁止|阻止滚动条滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Ty

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

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad

原生js判断某个区域的滚动条滚动到了底部

原生js判断某个区域的滚动条滚动到了底部 讲解==> 关系公式:element.scrollHeight - element.scrollTop === element.clientHeight 解释:此公式可以用于判断是否滚动到底 你必须知道这个方法 可以判断滚动条滚动到了底部哈! element.scrollHeight 是获取这个元素区域的实际高度(包含被隐藏起来的高度) element.scrollTop是获取滚动条距离顶部的实际距离(包含被隐藏起来的高度) element.client

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

js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动,这个怎么做呢? 如果能时时判断 用户是否在滚动就好了? 或者能够 知道滚动开始 和 结束事件 也行? 可惜均不知道! 目前,仅可以利用的就是div元素的滚动事件,下面是我的实现思路,如何判断用户是否滚动停止? 1.html代码 <div id="panel"> <div

SetWinEventHook 事件钩子(有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动等)good

相信消息钩子大家听的比较多,消息钩子能够在应用程序处理系统消息之前将其截获,提前处理并可以决定是否继续将消息往下传送,有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动等等,要截获这些事件可以使用SetWinEventHook,它的原型如下: HWINEVENTHOOK WINAPI SetWinEventHook(  __in  UINT eventMin,  __in  UINT eventMax,  __in  HMODULE hmodWinEventPro

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,

js将滚动条滚动到指定位置的方法

代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

javascript滚动条响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"