笑傲江湖3专题添加侧边栏

2019专题/1911笑傲江湖3专题/src/_index.html

@@ -17,9 +17,29 @@
     <!-- 模板-导航头部 -->
     <script id="without-navplus" src="//pub.dwstatic.com/common/dwNavbar/navbar.js?type=ka"></script><!--ignore-->
     <div class="o-wrap page-index">
+        <div class="mod-float">
+            <p class="bg-top"></p>
+            <p class="bg-bot"></p>
+            <div class="innerbox">
+                <div class="tips">
+                    <p>扫一扫二维码</p>
+                    <span>关注公众号</span>
+                </div>
+                <img src="http://xxa.wanmei.com/images/cover1907/ewm_weixin.png" alt="" class="qrcode" />
+                <ul class="menus">
+                    <li class="is-active" data-scroll="primarytools">预约享福利</li>
+                    <li data-scroll="jobview">职业预览</li>
+                    <li data-scroll="special">游戏特色</li>
+                    <li data-scroll="solevertu">多玩独家评测</li>
+                    <li data-scroll="video">精彩视频</li>
+                    <li data-scroll="preview">游戏美图</li>
+                    <li data-scroll="news">攻略资讯</li>
+                </ul>
+            </div>
+        </div>
         <div class="mod-part mod-primary popup-container">
             <i class="btn-popup-video"></i>
-            <div class="tools-wrap">
+            <div class="tools-wrap" data-position="primarytools">
                 <div class="btns">
                     <a href="javascript:;" target="_self" class="btn fl btn-order"></a>
                     <a href="javascript:;" target="_self" class="btn fr btn-follow"></a>
@@ -39,7 +59,7 @@
                 <div class="innerbox"><iframe src="http://xxa.wanmei.com/hd/1911/duowan/index.html" frameborder="0"></iframe></div>
             </div>
         </div>
-        <div class="mod-part mod-sects">
+        <div class="mod-part mod-sects" data-position="jobview">
             <div class="mod-title title1">
                 <p class="text"></p>
                 <span class="left"></span>
@@ -140,7 +160,7 @@
                 </div>
             </div>
         </div>
-        <div class="mod-part mod-special">
+        <div class="mod-part mod-special" data-position="special">
             <div class="mod-title title2">
                 <p class="text"></p>
                 <span class="left"></span>
@@ -176,7 +196,7 @@
                         <p class="special-pagination"></p>
                     </div>
                 </div>
-                <div class="infos-wrap">
+                <div class="infos-wrap" data-position="solevertu">
                     <div class="adorn-cloud">
                         <span class="left cloud1"></span>
                         <span class="right cloud2"></span>
@@ -192,7 +212,7 @@
                 </div>
             </div>
         </div>
-        <div class="mod-part mod-video">
+        <div class="mod-part mod-video" data-position="video">
             <div class="mod-title title3">
                 <p class="text"></p>
             </div>
@@ -222,7 +242,7 @@
                 </div>
             </div>
         </div>
-        <div class="mod-part mod-preview">
+        <div class="mod-part mod-preview" data-position="preview">
             <div class="mod-title title4">
                 <p class="text"></p>
                 <span class="left"></span>
@@ -241,7 +261,7 @@
                 </div>
             </div>
         </div>
-        <div class="mod-part mod-strategy">
+        <div class="mod-part mod-strategy" data-position="news">
             <div class="adorn-cloud">
                 <span class="left cloud1"></span>
                 <span class="right cloud2"></span>
@@ -330,6 +350,7 @@
     <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js"></script><!--ignore-->
     <script>
         require('modules/page/global.js');
+        require('modules/page/index.js');
         var danmuColor = [
             '#bd3ec2',
             '#c23e73',

2019专题/1911笑傲江湖3专题/src/modules/page/index.js

@@ -0,0 +1,62 @@
+var V = {
+    init: function () {
+        this.scrollPage();
+    },
+    scrollPage: function () {
+        var isScrollAnchor = true;
+        $('[data-scroll]').on('click', function () {
+            var $this = $(this),
+                anchor = $this.attr('data-scroll'),
+                $target = $('[data-position="' + anchor + '"]'),
+                scrollSpace = 0,
+                isScroll = false;
+            if (anchor === 'top') {
+                scrollSpace = 0;
+                isScroll = true;
+            }
+            if ($target.length > 0) {
+                scrollSpace = $target.offset().top - 41;
+                isScroll = true;
+            }
+            isScrollAnchor = false;
+            $this.addClass('is-active').siblings().removeClass('is-active');
+            isScroll && $('html, body').animate({ scrollTop: scrollSpace }, 600, function () {
+                isScrollAnchor = true;
+            });
+        });
+        $(window).scroll(function () {
+            isScrollAnchor && scrollAnchor();
+        });
+        scrollAnchor();
+        function scrollAnchor () {
+            var $elements = $('[data-scroll]'),
+                lengths = $elements.length,
+                windowHeight = $(window).height(),
+                scrollSpace = $(window).scrollTop();
+            for (var i=0; i<lengths; i++) {
+                var isSet = false,
+                    anchor = $elements.eq(i).attr('data-scroll'),
+                    $position = $('[data-position="' + anchor + '"]');
+                if (anchor !== 'top') {
+                    if (scrollSpace > $position.offset().top - windowHeight / 2) {
+                        isSet = true;
+                    }
+                } else {
+                    var nextAnchor = $elements.eq(i + 1).attr('data-scroll'),
+                        $nextPosition = $('[data-position="' + nextAnchor + '"]');
+                    if (scrollSpace < $nextPosition.offset().top - windowHeight / 2) {
+                        isSet = true;
+                    }
+                }
+                if (isSet) {
+                    $elements.eq(i).addClass('is-active').siblings().removeClass('is-active');
+                }
+            }
+        }
+
+    }
+}
+
+$(function () {
+    V.init();
+})

2019专题/1911笑傲江湖3专题/src/sass/global.scss

@@ -222,6 +222,77 @@ body {
         margin: 0 auto;
         position: relative;
     }
+    .mod-float {
+        width: 183px;
+        position: fixed;
+        z-index: 50;
+        bottom: 40px;
+        right: 20px;
+        padding: 26px 0 21px;
+        .bg-top, .bg-bot {
+            height: 26px;
+            width: 100%;
+            position: absolute;
+            z-index: 2;
+            left: 0;
+        }
+        .bg-top {
+            top: 0;
+            background: url(../img/pc/bg-float-top.png) top center no-repeat;
+        }
+        .bg-bot {
+            bottom: 0;
+            background: url(../img/pc/bg-float-bot.png) bottom center no-repeat;
+        }
+        .innerbox {
+            padding-top: 37px;
+            position: relative;
+            z-index: 3;
+            background: url(../img/pc/bg-float-cen.png) left top repeat-y;
+            .tips {
+                width: 100%;
+                position: absolute;
+                top: -15px;
+                color: #fff;
+                text-align: center;
+                p {
+                    font-size: 14px;
+                    line-height: 20px;
+                    @include opacity(0.45);
+                }
+                span {
+                    font-size: 18px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+            .qrcode {
+                height: 150px;
+                width: 150px;
+                margin: 0 auto;
+                display: block;
+            }
+            .menus {
+                width: 150px;
+                margin: 0 auto;
+                overflow: hidden;
+                li {
+                    height: 40px;
+                    margin-top: 9px;
+                    background: url(../img/pc/bg-float-menu.png?__sprite) top left no-repeat;
+                    font-size: 14px;
+                    color: #b4b4b4;
+                    line-height: 40px;
+                    text-align: center;
+                    cursor: pointer;
+                    &:hover, &.is-active {
+                        color: #ffeca8;
+                        background-image: url(../img/pc/bg-float-menu-hover.png?__sprite);
+                    }
+                }
+            }
+        }
+    }
     .mod-primary {
         height: 1026px;
         background-image: url(../img/pc/bg-primary.jpg);