test

css/qj_show.css

 @charset "utf-8";
+#show_sidebar{
+    position: fixed;
+    left:87px;
+    height:30%;
+}
+#show_sidebar div{
+    position: relative;
+    width:11px;
+    height:11px;
+    margin-bottom:38px;
+    border-radius: 50%;
+    background:#808080;
+}
+#show_sidebar div::after{
+    position: absolute;
+    top:0px;
+    left:4.5px;
+    content:"";
+    width: 2px;
+    height:195px;
+    background: #808080;
+}
+#show_sidebar li{
+    color:#808080;
+}
+#show_sidebar li::before{
+    content:'';
+    display: block;
+    width:7px;
+    height:7px;
+    border-radius: 50%;
+    background:#808080;
+}
+#show_sidebar .li_mouseover{
+    color:#b3b3b3;
+}
+#show_sidebar .li_mouseover::before{
+    background:#b3b3b3;
+}
+#show_sidebar .li_click{
+    width:9px;
+    height:9px;
+    color:#24b298;
+}
+#show_sidebar div{
+    width:11px;
+    height:11px;
+}
 /* 千家风采页样式 */
 header {
     height: 82px;
@@ -12,14 +60,14 @@ header {
 #content2 {
     margin-top:60px;
 }
-#content1 h1 {
+.model_top h1 {
     font-size: 30px;
     line-height: 28px;
     padding-top: 60px;
     text-align: center;
     color: #192d3b;
 }
-#content1 span {
+.model_top span {
     font-size: 12px;
     color: #192d3b;
     display: block;
@@ -27,7 +75,7 @@ header {
     text-align: center;
     letter-spacing: 1.5px;
 }
-#content1 h1:after {
+.model_top h1:after {
     content: "";
     display: block;
     width: 93px;

qj_show.html

@@ -35,7 +35,7 @@
             </div>
         </div>
     </div>
-    <!-- 侧边栏 -->
+    <!-- 右 侧边栏 -->
     <nav id="sidebar">
         <ul>
             <li class="qr_code">
@@ -61,13 +61,23 @@
             </li>
         </ul>
     </nav>
+    <!-- 左侧边栏  锚点点击 -->
+    <div id="show_sidebar">
+        <ul>
+            <div></div>
+            <li>团队风采</li>
+            <li>个人风采</li>
+            <li>校园招聘--</li>
+            <li>精彩短片</li>
+        </ul>
+    </div>
     <!-- 公司宣传视频 -->
     <div class="first_video">
         <video id="company_video" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/2018%E5%8D%83%E5%AE%B6%E5%AE%A3%E4%BC%A0%E7%89%87.mp4" autoplay preload="preload" controls="controls"></video>
     </div>
     <!-- 视差滚动 -->
     <div class="main" id="main">
-        <div class="content" id="content1" data-stellar-background-ratio="1">
+        <div class="content model_top" id="content1" data-stellar-background-ratio="1">
             <h1>团队风采</h1>
             <span>TEAM</span>
         </div>
@@ -145,7 +155,7 @@
         </div>
         <!-- 个人风采 -->
         <div id="person_mien" class="main_body">
-            <div class="content" id="content1" data-stellar-background-ratio="1">
+            <div class="content model_top" data-stellar-background-ratio="1">
                 <h1>个人风采</h1>
                 <span>PERSONAL</span>
             </div>
@@ -221,7 +231,7 @@
                 </div>
             </div>
         </div> 
-        <div class="content" id="content1" data-stellar-background-ratio="1">
+        <div class="content model_top" data-stellar-background-ratio="1">
             <h1>校园招聘</h1>
             <span>CAMPUS</span>
         </div>
@@ -235,7 +245,7 @@
         </div>
         <!-- 精彩短片 -->
         <div id="video_banner" class="main_body">
-            <div class="content" id="content1" data-stellar-background-ratio="1">
+            <div class="content model_top" data-stellar-background-ratio="1">
                 <h1>精彩短片</h1>
                 <span>SHORP FILM</span>
             </div>