<!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>
