zoukankan      html  css  js  c++  java
  • 滚动条滚动事件 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;
        auto;
        z-index:99999;
        margin:0px auto
    }

    .fixedxiangxix ul {
        display:block;
        98%;
        background:#fff;
    }

  • 相关阅读:
    API从网站中解放出来,也许会带来web3.0
    ASP.NET中MD5和SHA1加密的几种方法
    搜狐博客推出开放平台 1月3日举办开发者论坛
    Open Source PDF Libraries in C#
    .Net线程常见问题和误解解答集锦
    降低车辆油耗的十大不变法门
    知己知彼,百战不殆管理软件这个行业
    求职指南:英文求职简历十大忌讳
    .net中实现运行时从字符串动态创建对象
    用 .NET 开发的轻量级 UI 测试自动化.NET教程,.NET Framework
  • 原文地址:https://www.cnblogs.com/mm2015/p/4739912.html
Copyright © 2011-2022 走看看