不二如是 发表于 2017-11-23 15:54:26

技法80 (◐‿◑) 页面悬浮导航 | 【复刻HTML99】

本帖最后由 不二如是 于 2017-11-23 15:54 编辑

http://xxx.fishc.com/forum/201705/05/225545py2j222x5z6x55n2.png

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁



分析：


在很多长页面中，为了让导航条总是显示在可视范围内，需要让导航条悬浮。

   



Code：

HTML：
<div id='suspendNavigation'>
    <h2>页面悬浮导航</h2>
    <span id="tst"></span>
    <div><a href='http://www.fishc.com' target="_blank">导航1</a></div>
    <div><a href='http://www.fishc.com' target="_blank">导航2</a></div>
    <div><a href='http://www.fishc.com' target="_blank">导航3</a></div>
    <span id="tst"></span>
    <span id="tst1"></span>
</div>
<div class="content">
    <!-- lorem假文，专门用来填充页面的 -->
    <p>Welcom to FishC.com
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS：
<style>

    a{
      text-decoration:none;
    }
    /*===================页面悬浮导航=======================*/
    /*设置导航栏初始布局*/
    #suspendNavigation{
      top:0;
      position: absolute;
      background-color: #ccc;
      width: 100%;
      height: auto;

    }

/*设置导航栏固定样式，通过下方js代码才会触发*/
/*默认<div id='suspendNavigation'>标签没有.fix类*/
/*触发条件后，该标签会有class="fix",然后出发固定操作*/
    #suspendNavigation.fix{
      opacity:0.7;
      z-index: 1111;
      width: 100%;
      position: fixed;
      top: 0;
    }


    /*设置导航栏中的div*/
    #suspendNavigation div{
      position: relative;
      float: left;
      border: #cc2123 1px solid;
      width: 33%;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    /*设置文本基本样式*/
    .content{
      position: absolute;
      top:115px;
      height: 1999px;
    }
</style>

JS：
<script type="text/javascript">

    // 按照id绑定dom元素，获取导航栏对象
    var suspendNavigation=document.getElementById("suspendNavigation");
// 获取对象相对于body元素距离顶端的高度。
// 此时为0
      var pagenav_top = suspendNavigation.offsetTop;
      // 滚动事件被触发
      window.onscroll = function(){
            // body对象距离距离顶部的滚动距离
            // 没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
            var scrollTop = document.body.scrollTop;
            if(scrollTop < pagenav_top){
                suspendNavigation.className = "";
            }else{
                suspendNavigation.className = "fix";
            }
      }
</script>


请按照自己的理解订正对概念的认知

代码说明（秀智商）{:10_256:} ：
**** Hidden Message *****



回顾：

技法79 (◐‿◑) 获得指定月份的天数

0 0 9 9 - 鱼C - 7周年庆典之“固定菜单”



源代码：



○面试题索引贴●
如果喜欢，请订阅{:10_303:} ：
HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛


如果喜欢，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

lomiss 发表于 2017-12-7 18:19:55

牛皮

我家的鸡8岁了 发表于 2018-3-10 15:12:25

学习了

Ruide 发表于 2018-3-12 16:00:34

Merci.

张悦颖 发表于 2018-4-25 20:07:12

1

mhb789456 发表于 2018-5-15 09:06:53

   学习中

yunying12321 发表于 2018-8-14 16:07:43

学习

凌乱大帅比 发表于 2018-9-20 15:49:38

gjgj

喝水从不拧瓶盖 发表于 2019-6-22 14:41:03

啥时候能把源代码上上色呀，看到我好累呀

a211827754 发表于 2019-9-10 09:00:16

emm

群里最菜的一个 发表于 2019-10-16 09:33:44

哈哈

红蓝 发表于 2019-10-29 20:29:57

康康

疯狂的二哈 发表于 2019-11-8 19:45:30

感谢分享

笑死朕 发表于 2019-11-26 15:29:15

666

zltzlt 发表于 2020-1-24 22:40:50

这个神奇

zrfv 发表于 2020-2-21 23:03:10

谢谢分享

weiter 发表于 2020-3-9 15:02:49

666

笋头蒜头 发表于 2020-3-31 10:53:32

dafad的辅导辅导

287187056 发表于 2020-4-3 03:45:15

优时风 发表于 2020-5-22 15:52:51

什么
页: [1] 2
查看完整版本: 技法80 (◐‿◑) 页面悬浮导航 | 【复刻HTML99】