js模仿微信联系人定位和字母悬浮

喜欢ヅ旅行 2022-06-08 02:43 166阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    		<title>人名反应</title>
    	</head>
    	<style>
    		* {
    		  margin: 0;
    		  padding: 0;
    		  font-family: "microsoft yahei !important";
    		}
    		li {
    		  list-style: none;
    		}
    		#bigbox {
    		  margin-top: 0.525rem;
    		}
    		.search {
    		  width: 100%;
    		  display: block;
    		  height: 1.425rem;
    		  box-sizing: border-box;
    		  background: #f7f7f7;
    		  border-radius: 5px;
    		  border: 0;
    		}
    		#searchbox {
    		  position: relative;
    		  width: 17.55rem;
    		  font-size: 0.65rem;
    		  margin: 0 auto;
    		  height: 1.425rem;
    		  margin-bottom: 0.6rem;
    		}
    		#searchbox img {
    		  position: absolute;
    		  display: inline-block;
    		  width: 0.875rem;
    		  height: 0.875rem;
    		  top: 50%;
    		  margin-top: -0.4375rem;
    		  margin-left: 0.625rem;
    		}
    		#searchbox span {
    		  color: #bbbbbb;
    		  position: absolute;
    		  top: 50%;
    		  margin-top: -0.4375rem;
    		  margin-left: 1.75rem;
    		}
    		.namelist {
    		  display: block;
    		  height: 1.125rem;
    		  line-height: 1.125rem;
    		  background: #f5f5f5;
    		  color: #999999;
    		  font-size: 0.6rem;
    		  border-top: 1px solid #e6e6e6;
    		}
    		.namelist span {
    		  display: block;
    		  width: 17.55rem;
    		  margin: 0 auto;
    		}
    		.listbox {
    		  display: block;
    		  width: 100%;
    		}
    		.listbox li {
    		  width: 17.55rem;
    		  font-size: 0.65rem;
    		  height: 2.2rem;
    		  margin: 0 auto;
    		  line-height: 2.2rem;
    		  font-size: 0.7rem;
    		  color: black;
    		  border-bottom: 1px solid #e6e6e6;
    		}
    		li:last-child {
    		  border: none ;
    		}
    		.right_nav {
    		  position: fixed;
    		  right: 0.6rem;
    		  top: 25%;
    		}
    		.right_nav li {
    		  font-size: 0.5rem;
    		}
    		.right_nav img {
    		  width: 0.45rem;
    		}
    		.active_fixed {
    		  position: fixed;
    		  display: block;
    		  top: 0;
    		  width: 100%;
    		}
    		.active_top {
    		  margin-top: 1.2rem;
    		}
    		.active_hide {
    		  display: none;
    		}
    		.overbox {
    		  width: 100%;
    		}
    		.overbox .overlistbox {
    		  display: block;
    		  width: 18.15rem;
    		  margin-left: 0.6rem;
    		}
    		.overbox .overlistbox li {
    		  font-size: 0.7rem;
    		  border-bottom: 1px solid #e6e6e6;
    		  height: 2.25rem;
    		  line-height: 2.25rem;
    		}
    		input {
    		  outline: none;
    		  /*清除选中效果的默认蓝色边框 */
    
    		  -webkit-appearance: none;
    		  /*清除浏览器默认的样式 */
    
    		  line-height: normal;
    		}
    	</style>
    	<body style="position: relative;">
    		<div id="bigbox">
    			<div id="searchbox">
    				<form action="#" ><input class="search"  type="search" /></form>
    				<spahu class='imgbig'>
    					<img  src="img/search.png"/>
    					<span >搜索</span>
    				</spahu>
    			</div>
    		</div>
    		
    		<div id="list_big_box" style="">
    			<div class="elist publictop"  style="display: none">
    				<div class="namelist active_fixed"><span id="pubtext">A</span></div>
    			</div>
    			<ul id="ul">
    				<div class="elist" id="A">
    					<div class="namelist"><span>A</span></div>
    					<ul class="listbox">
    						<li>Acetoacetic Ester Condensation</li>
    						<li>Acetoacetic Ester Synthesi</li>
    						<li>Acyloin Condensation</li>
    						<li>Alder-Ene Reaction</li>
    					</ul>
    				</div>
    				<div class="elist" id="B">
    					<div class="namelist"><span>B</span></div>
    					<ul class="listbox">
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Baeyer-Villiger Oxidation</li>
    						<li>Acyloin Condensation</li>
    						<li>Alder-Ene Reaction</li>
    					</ul>
    				</div>
    				<div class="elist" id="C">
    					<div class="namelist"><span>C</span></div>
    					<ul class="listbox">
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    						<li>Ccetoacetic Ester Condensation</li>
    						<li>Ccetoacetic Ester Synthesi</li>
    					</ul>
    				</div>
    				<div class="elist" id="D">
    					<div class="namelist"><span>D</span></div>
    					<ul class="listbox">
    						<li>Dcetoacetic Ester Condensation</li>
    						<li>Dcetoacetic Ester Synthesi</li>
    						<li>Dcyloin Condensation</li>
    						<li>Dlder-Ene Reaction</li>
    						<li>Dcetoacetic Ester Condensation</li>
    						<li>Dcetoacetic Ester Synthesi</li>
    						<li>Dcyloin Condensation</li>
    						<li>Dlder-Ene Reaction</li>
    						<li>Dcetoacetic Ester Condensation</li>
    						<li>Dcetoacetic Ester Synthesi</li>
    						<li>Dcyloin Condensation</li>
    						<li>Dlder-Ene Reaction</li>
    						<li>Dcetoacetic Ester Condensation</li>
    						<li>Dcetoacetic Ester Synthesi</li>
    						<li>Dcyloin Condensation</li>
    						<li>Dlder-Ene Reaction</li>
    					</ul>
    				</div>
    				<div class="elist" id="E">
    					<div class="namelist"><span>E</span></div>
    					<ul class="listbox">
    						<li>Ecetoacetic Ester Condensation</li>
    						<li>Ecetoacetic Ester Synthesi</li>
    						<li>Ecyloin Condensation</li>
    						<li>Elder-Ene Reaction</li>
    						<li>Ecetoacetic Ester Condensation</li>
    						<li>Ecetoacetic Ester Synthesi</li>
    						<li>Ecyloin Condensation</li>
    						<li>Elder-Ene Reaction</li>
    						<li>Ecetoacetic Ester Condensation</li>
    						<li>Ecetoacetic Ester Synthesi</li>
    						<li>Ecyloin Condensation</li>
    						<li>Elder-Ene Reaction</li>
    						<li>Ecetoacetic Ester Condensation</li>
    						<li>Ecetoacetic Ester Synthesi</li>
    						<li>Ecyloin Condensation</li>
    						<li>Elder-Ene Reaction</li>
    					</ul>
    				</div>
    				<div class="elist" id="F">
    					<div class="namelist"><span>F</span></div>
    					<ul class="listbox">
    						<li>Fcetoacetic Ester Condensation</li>
    						<li>Fcetoacetic Ester Synthesi</li>
    						<li>Fcyloin Condensation</li>
    						<li>Flder-Ene Reaction</li>
    						<li>Fcetoacetic Ester Condensation</li>
    						<li>Fcetoacetic Ester Synthesi</li>
    						<li>Fcyloin Condensation</li>
    						<li>Flder-Ene Reaction</li>
    					</ul>
    				</div>
    			</ul>
    			<ul class="right_nav">
    				<img src="img/search_little.png"/>
    				<li>A</li>
    				<li>B</li>
    				<li>C</li> 
    				<li>D</li>
    				<li>E</li>
    				<li>F</li>
    				<li>G</li>
    				<li>H</li>
    				<li>I</li>
    				<li>J</li>
    				<li>K</li>
    				<li>L</li>
    				<li>M</li>
    				<li>N</li>
    				<li>O</li>
    				<li>P</li>
    				<li>Q</li>
    				<li>R</li>
    				<li>S</li>
    				<li>T</li>
    				<li>U</li>
    				<li>V</li>
    				<li>W</li>
    				<li>X</li>
    				<li>Y</li>
    				<li>Z</li>
    			</ul>
    		</div>
    	</body>
    </html>
    <script type="text/javascript">
    	//适配
    	(function (doc, win) {  
            var docEl = doc.documentElement,  
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
                recalc = function () {  
                    var clientWidth = docEl.clientWidth;  
                    if (!clientWidth) return;  
                    if(clientWidth>=1024){  // 兼容的设备宽度最大尺寸 
                    	//iphone6   1rem  = 20px;
                        docEl.style.fontSize = '54.61px';  
                        // console.log("1rem===="+docEl.style.fontSize);
                    }else{  
                        docEl.style.fontSize = 54.61* (clientWidth / 1024) + 'px';  
                      	//console.log("1rem====="+docEl.style.fontSize);  
                    }  
                };  
            if (!doc.addEventListener) return;  
            win.addEventListener(resizeEvt, recalc, false);  
            doc.addEventListener('DOMContentLoaded', recalc, false);  
        })(document, window);  
      	//滚动字母悬浮
        window.addEventListener('scroll',function(){    
            var sct = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;
            var scp = document.querySelector('.right_nav').firstChild.nextElementSibling;
            var scrtop = document.querySelector('#A').lastElementChild.offsetTop;
            var imalist = document.querySelectorAll('.elist');
            if(scrtop-sct<=14){//余量自己调
            	document.querySelector('.publictop').style.display = "block";
    
            }else{
            	document.querySelector('.publictop').style.display = "none";
            }
            for(var i=0;i<imalist.length;i++){
            	if(sct-imalist[i].offsetTop>=0){
            		document.querySelector('#pubtext').innerHTML=Elist[i].firstChild.innerHTML;
            	}
            }
        });
        //定位
        var liList = document.querySelector('.right_nav').children;
        var Elist = document.querySelectorAll('.namelist');
    	for(var i=0;i<liList.length;i++){
    		liList[i].index = i;
    		liList[i].onclick=function(){
    			if(this.index==0){//回顶部
    				document.querySelector('html').scrollIntoView();
    			}
    			var _text = this.innerHTML;//点击左侧的字母
    			if(Elist[this.index-1]){
    				var listText=Elist[this.index].firstChild.innerHTML;
    			}
    			if(_text==listText){//防止某个 字母下内容为空
    				Elist[this.index].parentNode.scrollIntoView();
    			}
    		}
    	}
    </script>