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

  • 相关阅读:
    Vue.js学习 Item14 – 过滤器与自定义过滤器
    Vue.js学习 Item13 – 指令系统与自定义指令
    Vue.js学习 Item12 – 内部响应式原理探究
    redis配置文件redis.conf详细说明
    PhpStorm下Laravel代码智能提示
    laravel 5.0 artisan 命令列表(中文简体)
    阿里云CENTOS服务器挂载数据盘
    NGINX关于配置PATHINFO
    LINUX下导入、导出MYSQL数据库命令
    ECSTORE2.0 定时任务配置
  • 原文地址:https://www.cnblogs.com/mm2015/p/4739912.html
Copyright © 2011-2022 走看看