* { margin:0; padding:0; box-sizing:border-box; } body { padding-top:100px; } .modulePage > div { height:800px; } .a1 { background:#826da0; } .a2 { background:#abdaa1; } .a3 { background:#3b3444; } .a4 { background:#374434; } .a5 { background:#3cdc17; } .moduleSpan { position:fixed !important; right:30px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:20px; z-index:100; height:auto !important; overflow:hidden; } .moduleSpan span { display:block; border:1px solid #f2f0f1; border-radius:50%; width:12px; height:12px; margin:0 auto; box-sizing:border-box; background:#fff; margin-bottom:1rem; cursor:pointer; transition:all .3s; -webkit-transition:all .3s; -o-transition:all .3s; -ms-transition:all .3s; -moz-transition:all .3s; } .moduleSpan span.active { background:#f18101; width:18px; height:18px; border-color:transparent; } .headerWrap { background:#000; height:100px; width:100%; position:fixed; top:0; left:0; }
1.单页面模块联动 // str1 ----- module上面顶部的class// .modulepage 大盒子// .modulechild 小盒子// .modulespan 分页器// span active 分页器样式类名