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;
    }

  • 相关阅读:
    优质Android小部件:索尼滚动相册
    Linux常用命令:文件与目录
    Android高效计算——RenderScript(二)
    Android高效计算——RenderScript(一)
    实用控件分享:自定义逼真相机光圈View
    Binder中的asInterface解析
    Android Adapter的几个方法
    Android中各种Drawable总结
    win10配置CUDA+Tensorflow2.0的一些经验
    关于Flash Helper Service的问题
  • 原文地址:https://www.cnblogs.com/mm2015/p/4739912.html
Copyright © 2011-2022 走看看