鱼C论坛

 找回密码
 立即注册
查看: 3745|回复: 6

[庖丁解牛] 0 0 9 9 - 鱼C - 7周年庆典之“固定菜单”

[复制链接]
发表于 2017-3-27 15:47:14 | 显示全部楼层 |阅读模式
购买主题 已有 3 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-28 13:36:00 | 显示全部楼层
教程很好!!!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-28 21:01:28 | 显示全部楼层
dreamdnj 发表于 2017-3-28 13:36
教程很好!!!!!

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-1 16:53:52 | 显示全部楼层
有了你那些秘籍 是不是就可以放养了。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-26 19:12:26 | 显示全部楼层
直接document.body.scrollTop;获得的值一直为0;百度了一下好像是dtd问题(不懂),不过改成document.documentelement.scroll就好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        *{
        padding: 0;
        margin: 0;
        font-weight: 300;
         }
        body{
            background:#c8ece3;
            font-family: "Adobe Fan Heiti Std";
        ;
        }

        h1{
            text-align: center;
            font-size: 88px;
            color: #ff76c8;
            font-family: "Academy Engraved LET";
            margin: 66px auto 33px;/*上66 左右自动 下33*/
            border-bottom: 3px solid rgba(0,0,0,.6);
            text-transform: uppercase;/*全部大写*/
            font-weight: 600;
        }

        #content{
            padding: 11px 55px;
        }
        h2{
            font-size: 55px;
            color: rgba(195,9,87,.8);
            margin-bottom: 33px;/*线下边距离22px*/
            padding-bottom: 33px;/*线上边距离*/
            border-bottom: 2px solid rgba(0,0,0,.3);
        }
        p{
            font-size: 33px;
            line-height: 1.3;
            margin-bottom:33px;/*文本距离h2距离*/
        }

        img{
            float: left;
            margin-right: 22px;
            padding: 22px;

            border: 2px dotted rgba(0,0,0,.6);
            background: rgba(0,0,0,.3);
        }
        img.right{
            margin-left: 22px;
            margin-right: 0;
            float: right;
        }

        #nav{
                        height:66px;
                        margin-bottom:33px;
                }
                        #page-nav{
                                text-align:center;
                                background:#e02562;
                                box-shadow: 1px 2px 5px rgba(0,0,0,.3);
                        }
                        #page-nav li{
                                list-style:none;
                                display:inline-block;
                                line-height:66px;
                                width:211px;
                        }
                        #page-nav li a{
                                color:#fff;
                                text-decoration:none;
                                font-size:22px;
                        }
                        #page-nav.fix{
                                width:100%;
                                position:fixed;
                                top:0px;
                        }

    </style>
</head>
<body>
    <section id="content">
        <article>
        <h1>鱼C - 7周年盛典</h1>
                <nav id="nav">
                        <ul id="page-nav">
                                <li><a href="">邀请谈主页</a></li>
                                <li><a href="">鱼c里程碑</a></li>
                                <li><a href="">庆典计划</a></li>
                                <li><a href="">小甲鱼的一封信</a></li>
                                <li><a href="">未来计划</a></li>
                        </ul>
                </nav>
        <img src="1.jpg">
        <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>

        <article>
            <h2>让</h2>
            <img src="2.jpg" class="right">
            <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>

        <article>
            <h2>编程</h2>
            <img src="3.jpg">
            <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>

        <article>
            <h2>改变</h2>
            <img src="4.jpg" class="right">
            <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>

        <article>
            <h2>世界</h2>
            <img src="5.jpg">
            <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>

        <article>
            <h2>Change the World By Program</h2>
            <img src="6.jpg" class="right">
            <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
            其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
            无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
        </article>


    </section>

        <script>
                var onav=document.getElementById("page-nav");
                var navTop=onav.offsetTop;
                window.onscroll=function(){
                        var scrollTop=document.documentElement.scrollTop;
                        //alert(scrollTop);
                        if(scrollTop<navTop){
                                onav.className="";
                        }
                        else{
                                onav.className="fix";
                        }
                };
        </script>
   

   


</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2019-10-16 11:40:00 | 显示全部楼层
是菠萝不是萝卜 发表于 2018-10-26 19:12
直接document.body.scrollTop;获得的值一直为0;百度了一下好像是dtd问题(不懂),不过改 ...

var scrollTop = window.pageYOffset;

这样也可以!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-28 15:32:33 | 显示全部楼层
本帖最后由 小脑斧 于 2020-4-28 15:35 编辑

打卡
Scan.jpg
Scan.jpg
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室-悬浮回顶小三角</title>
  6.     <style type="text/css">
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.             font-weight: 300;
  11.          }
  12.         body{
  13.             background:#c8ece3;
  14.             font-family: "华文中宋 ";
  15.         }
  16.         
  17.         h1{
  18.             text-align: center;
  19.             font-size: 88px;
  20.             color: #ff76c8;
  21.             font-family: "PMingLiU";
  22.             margin: 66px auto 33px;/*上66 左右自动 下33*/
  23.             border-bottom: 3px solid rgba(0,0,0,.6);
  24.             text-transform: uppercase;/*全部大写*/
  25.             font-weight: 600;
  26.         }
  27.         #content{
  28.             padding: 11px 16px;
  29.         }
  30.         h2{
  31.             font-size: 43px;
  32.             color: rgba(195,9,87,.8);
  33.         }
  34.         p{
  35.             font-size: 22px;
  36.             line-height: 1.3;
  37.             margin-bottom: 33px;
  38.         }
  39.         img{
  40.             float: left;
  41.             margin-right: 22px;
  42.             padding: 22px;

  43.             border: 2px dotted rgba(0,0,0,.6);
  44.             background: rgba(0,0,0,.3);
  45.         }
  46.         img.right{/*区别设置<img class="right">*/
  47.             margin-left: 22px;
  48.             margin-right: 0;
  49.             float: right;
  50.         }
  51.         #top{
  52.             position: fixed;/*固定位置*/
  53.             z-index: 5555;/*悬浮在其他元素之上*/
  54.             right: 55px;
  55.             bottom: 55px;
  56.             padding-top: 33px;
  57.             text-align: center;
  58.             box-sizing: border-box;
  59.             width: 155px;
  60.             height: 77px;


  61.             background: rgba(133,105,172,.6);
  62.             border: 1px solid rgba(0,0,0,.6);

  63.             cursor: help;
  64.             opacity: 0;
  65.             transition: all 1.1s;
  66.         }
  67.         #top.show{
  68.             opacity: 1;
  69.         }
  70.         #top:after{
  71.             content: '';
  72.             width: 0;
  73.             height: 0;

  74.             position: absolute;
  75.             border-width: 16px;
  76.             border-style: solid;
  77.             border-color: transparent transparent aqua transparent;
  78.             top: 1px;

  79.             left: 60px;/*剧中*/
  80.         }
  81.         #nav{
  82.             height: 66px;
  83.             margin-bottom: 33px;
  84.         }
  85.         #page-nav{
  86.             text-align: center;
  87.             background: #E02562;
  88.             box-shadow: 1px 2px 5px rgba(0,0,0,.3);
  89.         }
  90.         #page-nav li{
  91.             list-style: none;
  92.             display: inline-block;
  93.             line-height: 66px;
  94.             width: 211px;
  95.         }
  96.         #page-nav li a{
  97.             color: #FFFFFF;
  98.             text-decoration: none;/*去除下划线*/
  99.             font-size: 22px;

  100.         }
  101.         #page-nav.fix{
  102.             width: 100%;;/*防止固定后,不能充满屏幕*/
  103.             position: fixed;
  104.             top: 0;/*top为0,固定在页面顶部。*/
  105.         }
  106.     </style>

  107. </head>
  108. <body>
  109.     <section id="content">

  110.         <article>
  111.             <h1>鱼C - 10周年盛典</h1>
  112.             <nav id="nav">
  113.                 <ul id="page-nav">
  114.                     <li><a href="">邀请函主页</a> </li>
  115.                     <li><a href="">鱼C里程碑</a> </li>
  116.                     <li><a href="">庆典计划</a> </li>
  117.                     <li><a href="">小甲鱼的一封信</a> </li>
  118.                     <li><a href=""> 未来计划</a> </li>
  119.                 </ul>

  120.             </nav>
  121.             <img src="1.jpg">
  122.         <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  123.             其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  124.             无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  125.         </article>

  126.         <article>
  127.             <h2>让</h2>
  128.             <img src="2.jpg" class="right">
  129.             <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  130.                 其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  131.                 无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  132.         </article>

  133.         <article>
  134.             <h2>编程</h2>
  135.             <img src="3.jpg">
  136.             <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  137.                 其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  138.                 无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  139.         </article>

  140.         <article>
  141.             <h2>改变</h2>
  142.             <img src="4.jpg" class="right"><!--区别设置<img class="right">-->
  143.             <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  144.                 其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  145.                 无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  146.         </article>

  147.         <article>
  148.             <h2>世界</h2>
  149.             <img src="5.jpg">
  150.             <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  151.                 其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  152.                 无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  153.         </article>

  154.         <article>
  155.             <h2>Change the World By Program</h2>
  156.             <img src="6.jpg" class="right">
  157.             <p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
  158.                 其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
  159.                 无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
  160.         </article>
  161.     </section>
  162.     <div id="top">我要上天!</div>
  163.     <!--JS位置:body-->
  164.     <script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
  165.     <script type="text/javascript">
  166.         var pagenav = document.getElementById("page-nav") ;
  167.         var pagenav_top= pagenav.offsetTop;//??
  168.         window.onscroll = function(){
  169.             var scrollTop = document.documentElement.scrollTop;
  170.             //<=> var scrollTop = window.pageYOffset;

  171.             if (scrollTop < pagenav_top){
  172.                 pagenav.className = "";
  173.             }else {
  174.                 pagenav.className = "fix";
  175.             }
  176.         }
  177.         $(document).ready(function(){
  178.             $(window).scroll(function(){
  179.                 nav = $(window).scrollTop();
  180.                 if(nav > 666){
  181.                     $('#top').addClass('show');
  182.                 }
  183.                 else{
  184.                     $('#top').removeClass('show');
  185.                 }
  186.             });
  187.             $('#top').click(function(){
  188.                 $('body,html').animate({scrollTop:0},1000);
  189.             });
  190.         });
  191.     </script>
  192. </body>
  193. </html>
复制代码


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 20:27

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表