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

  • 相关阅读:
    解决错误APB AP transaction error, DAP status f0000021
    快速实现Flash自动烧写功能
    [分享] Zynq-7000 XIP 2018.3,在QSPI Flash中运行程序
    区块链入门到实战(2)之区块链 – 发展历史
    区块链入门到实战(1)之区块链 – 介绍
    Python爬虫小白入门(十四)Python 爬虫 – 提取数据到Pandas DataFrame
    Python爬虫小白入门(十三)Python 爬虫 – 使用CSS选择器
    Python爬虫小白入门(十二)Python 爬虫 – 根据id与class查找标签
    Python爬虫小白入门(十一)Python 爬虫 – 根据类型查找标签
    Python爬虫小白入门(十)Python 爬虫 – BeautifulSoup分析页面
  • 原文地址:https://www.cnblogs.com/mm2015/p/4739912.html
Copyright © 2011-2022 走看看