博客园装饰——(一)置顶菜单栏

博客园装饰——(一)置顶菜单栏

功能描述:当页面向下滚动到菜单栏上边沿触碰到浏览器窗口上边沿时,菜单栏会固定地显示在浏览器窗口上方(贴紧),即达到了置顶菜单栏的效果。而当页面向上滚动到原来的位置时,菜单栏又会自动返回文档流,即回到初始的位置。

博客园装饰——(一)置顶菜单栏

一、功能描述

1.1 文字描述

  • 当页面向下滚动到 菜单栏上边沿触碰到浏览器窗口上边沿时,菜单栏会 固定地显示在浏览器窗口上方(贴紧),即达到了 置顶菜单栏的效果。而当页面向上滚动到原来的位置时,菜单栏又会自动返回文档流,即 回到初始的位置

1.2 图片效果展示

1.2.1 例程(demo)效果展示

博客园装饰——(一)置顶菜单栏

1.2.2 本人博客园效果展示

博客园装饰——(一)置顶菜单栏

有现成的效果哟~你确定不试一哈?

二、 代码展示

2.1 html 部分


            菜单栏

        (div.text+br*10)*10

我们的菜单栏(id=”navigator”)的div盒子,是在(id=”header”)的盒子内部

2.2 CSS 部分


    body{
        padding: 0px;
        margin:0px;
    }

    #header{
        width:100%;
        /*background-color: lightblue;*/
    }

    #navigator, #navigator1{
        width:100%;
        background-color:gold;
        text-align: center;
        height:150px;
        font:bold 75px/150px 'Microsoft Yahei';
        /*opacity: 0.5;*/
    }
    /*用于当navigator脱离文档流时,navigator1来进行填充原来的空位*/
    #navigator1{
        /*由于刚开始,navigator(即菜单栏)没有脱离文档流,所以先不展示navigator1*/
        display:none;
    }

    .else{
        width:100%;
        height:200px;
        background-color: green;
    }

    .text{
        text-align: center;
        font:bold 25px/25px 'Microsoft Yahei';
    }

由于 “navigator1”博客园自带的html标签没有使用这个ID选择器(因为这是我们自己新增的一个选择器,为了当 “navigator”脱离文档流时对原位置进行填充),所以我们需要下面的js代码来写入一个div标签,并且应用该ID选择器。具体原因,请看下面的 重难点详解

2.3 JS 部分


    $(function(){
        // 获取header这个标签元素
        var $header = $('#header');
        $header.html( $header.html() + '<div id="navigator1"></div>' );

        var $navigator = $('#navigator');
        var $navigator1 = $('#navigator1');

        $(window).scroll(function(){
            var $iNum = $(document).scrollTop();
            //监控页面滚动距离,并显示在标签页上
            // document.title = $iNum;  // 200 触发事件

            // 200 非固定值,根据自己的需要修改,最好就是滚动到菜单栏上边沿时触发
            if ( $iNum >= 200){
                /*
                    当页面滚动200px时,为navigator写入样式,使其固定定位到浏览器窗口上边沿
                    此时会发生脱离文档流现象
                */
                $navigator.css({
                    'position':'fixed',
                    'top':0
                })
                // 相当于将navigator1的display的"none"改成"block"
                $navigator1.show();

            }
            else{
                /*设置为未定位,返回文档流*/
                $navigator.css({
                    'position':'static'
                })
                // 设置回"none",即隐藏
                $navigator1.hide();
            }
        })

    })

由于博客园原文档流当中没有””这一句,所以需要通过js写入

三、重难点详解

3.1 页面内容跳变现象(脱离文档流)

3.1.1 动图演示

博客园装饰——(一)置顶菜单栏

你会发现~♪菜单栏下面的”文档内容”这一行字会 突然跳到 菜单栏三个大字 中间,这就是我所说的所谓的 跳变现象,那这是为什么呢?

3.1.2 原因

如果你能看到这,答案相信已经很明了了,就是因为菜单栏应用了 固定定位以后,发生了 脱离文档流现象,导致外面的盒子 header的高度变小了,从而使得下面的内容自动往上排版,从而出现 页面内容跳变的现象。

3.1.3 解决方法

① 利用 js 获取 header 元素,通过 xxx.html( ) 方法写入 ” “

② 在CSS部分中,让”navigator1″应用 相同的样式(保证占据与菜单栏相同的高度),并且先不展示 (display:none;)

当”navigator”脱离文档流以后,让”navigator1″展示出来, 占据(填充)原来”navigator”的位置,从而达到克服页面跳变现象。

博客园装饰——(一)置顶菜单栏

四、总结与后言

整体设计思路也并不复杂,主要注意脱离文档流以后导致的跳变现象。由于可能每个博客的样式与具体html文档内容不同,所以博主我在这里只提供了一个demo,大致的原理已经提及了。大家可以先通过demo自己研究一遍,再进行设计, 毕竟自己设计的才是最符合自己心意的,并且能从中学到新知识。

博主还有其他几篇关于博客园装饰的文章,可供观看哟~
博客园装饰——(二)滚动到页面顶部或底部
博客园装饰——(三)博客园导航目录

Original: https://www.cnblogs.com/fry-hell/p/13338205.html
Author: 油炸地狱
Title: 博客园装饰——(一)置顶菜单栏

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/612520/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 【转】我是一个CPU:这个世界慢!死!了!

    简介 我经常听到人们说磁盘慢,网络很慢,这是从人类感知的角度来表达的。比如,把一个文件拷贝到硬盘上需要几分钟到几十分钟,足够我吃一顿饭;而从网上下载一部电影,有时需要几个小时,我可…

    Linux 2023年5月27日
    0134
  • IDEA生成带参数和返回值注释

    步骤说明 打开IDEA进入点击左上角 – 文件 – 设置 – 编辑器 – 活动模板 新建活动模板 填写模板文本 编辑变量 添加变量表…

    Linux 2023年6月6日
    0125
  • django_响应对象

    Django_响应对象 响应对象 响应对象有三种形式:HttpResponse()render()Redirect() (1) HttpResponse() django服务器接收…

    Linux 2023年6月7日
    0140
  • go语言接口

    接口在底层的实现有两个部分:type 和 data。 在源码中,显式地将 nil 赋值给接口时,接口的 type 和 data 都将为 nil。此时,接口与 nil 值判断是相等的…

    Linux 2023年6月13日
    097
  • haproxy

    haproxy 一.haproxy简介 二.负载均衡 三.haproxy安装 1.yum安装 2.源码安装 2.1 配置文件解析 2.2时间格式 2.3 全局global 2.4 …

    Linux 2023年6月7日
    0139
  • Linux之Keepalived高可用

    一、高可用介绍 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用户是无感知的。 硬件通常使用:F5 软件通常使用:Ke…

    Linux 2023年6月14日
    0170
  • mybatis-plus详细讲解

    本文笔记都是观看狂神老师视频手敲的,视频地址:https://www.bilibili.com/video/BV17E411N7KN 学java后端的都可以去看一下,从基础到架构很…

    Linux 2023年6月7日
    0150
  • ssh远程连接服务(二)三台虚拟机之间的免密登录

    创建三台虚拟机主机名分别为node01、node02、node03 在node01虚拟机上生成密钥对 然后将生成的公钥分别复制到node02、node03的虚拟机上(前提三台虚拟机…

    Linux 2023年6月7日
    0129
  • 【6】2022年8月

    8月21日 OMG!!我真的是懒骨头!不到最后一刻丝毫不紧张!! 兄弟,八月底了阿!! 你为了明年的计划,要想同一时间内赚5万和成功上岸,这太不可思议了! 你压力好大的,别到最后放…

    Linux 2023年6月13日
    0110
  • nslookup:command not found的解决办法

    nslookup:command not found的解决办法 通过nslookup查看DNS记录,在这里遇到了一个小插曲,nslookup:command not found(未…

    Linux 2023年6月7日
    0109
  • Docker下部署LNMP黄金架构

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    Linux 2023年6月7日
    0125
  • 如何写出有效的单元测试

    测试不要名不副实避免测试的描述与测试内容不符;测试结果必须精准;测试该失败的时候一定要失败! 测试私有或者受保护的方法解决思路: 将方法变成公共方法; 将方法抽取到新类; 将方法变…

    Linux 2023年6月8日
    0123
  • 聊聊Netty那些事儿之从内核角度看IO模型

    从今天开始我们来聊聊Netty的那些事儿,我们都知道Netty是一个高性能异步事件驱动的网络框架。 它的设计异常优雅简洁,扩展性高,稳定性强。拥有非常详细完整的用户文档。 同时内置…

    Linux 2023年6月6日
    0115
  • Java秒杀系统二:Service层

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    Linux 2023年6月11日
    0124
  • 通过启动脚本控制PHP-FPM开关

    vi /etc/init.d/php-fpm 复制粘贴以下内容: ! /bin/sh Comments to support chkconfig on CentOSchkconfi…

    Linux 2023年6月6日
    0118
  • 机器学习算法_knn(福利)

    这两天翻了一下机器学习实战这本书,算法是不错,只是代码不够友好,作者是个搞算法的,这点从代码上就能看出来。可是有些地方使用numpy搞数组,搞矩阵,总是感觉怪怪的,一个是需要使用三…

    Linux 2023年6月6日
    0131
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球