石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 建站经验 >

网站顶部导航栏自动隐藏显示代码

发表日期:2020-07-06 22:45文章编辑:优搜客浏览次数: 标签: HTML教程|    

导航栏自动显示隐藏代码一
  给大家分享的一种简单实用的使用JS原生设计的实现网站顶部自动显示隐藏的代码,优点是体积小,只有几行代码,缺点是没有专业的JQ或headroom.js实现的那么绚丽。但通过配合CSS3也可以实现得不错。
function hidden_nav()
{
    var hand=document.getElementById("for_nav");
    var navHeight=hand.offsetHeight;
    var curY=document.documentElement.scrollTop;
    if(curY > navHeight)
    {
        hand.style.position="fixed";
    }   
    if(curY < navHeight+80)
    {
        hand.style.position="relative";   
    }
}//将这段JS代码放在HTML文件中,或单独放在一个JS文件中加载
使用上述的顶部导航栏自动显示隐藏代码时需要配合HTML中的行内样式和ID来实现,说明如下:在body标签中添加事件代码onmousemove="hidden_nav();";在导航栏所在的div标签中添加样式和IDstyle="position:relative;z-index:900;" id="for_nav"。全部代码如下:
  <body onmousemove="hidden_nav();">
  <div  style="position:relative;z-index:900;" id="for_nav">
导航栏自动显示隐藏代码二
  在这里我们使用CSS的position来实现,给导航栏添加类名<div class="channel">,然后在CSS新式表中添加样式:.channel{postion:fixed;top:0}来实现,这种方式直接将网站顶部导航栏置顶,不存在滑过一定距离再显示出来。但是优势却是实现简单,速度快,如果网站不是使用特效多,以SEO为主的网站推荐使用。
导航栏自动显示隐藏代码三
  使用一款专业的网站顶部导航栏特效插件headroom.js来实现,它的作用是为页面顶部多留些空间。在不需要页头时将其隐藏。
Headroom.js 是什么?
  Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。
Headroom.js 有什么用?
  固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题… 大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。
Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来,让用户花更多时间关注你页面上的内容。
Headroom.js 用法
使用 headroom.js 是很简单的。它提供了简单的 JS API,另外,还可以作为 jQuery/Zepto 插件使用。
纯JS调用方式
// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init(); 
以 jQuery/Zepto 插件形式调用
// 是不是很简单!
// 注意: init() 默认在插件内部被调用了
$("#header").headroom();

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jzjy/11528.html

网站设计案例推荐

热门新闻

「石家庄网站建设」企业建网站如何提高网页打开速度

手机网站建设技巧及推广方法

「不等于符号」sql 不等于符号

服务器返回的http状态码

做好站内优化的重要性有哪些?

phpcms显示验证码出错怎么办?

CSS解决文字与图片不能水平居中对齐的问题

网站运营推广中哪些问题常常会遇到?

相关新闻
推荐新闻

石家庄SEO:PR值是什么意思?

网页加载缓慢怎么办?

超链接去掉下划线的几个方法

404页面对SEO优化影响有多大?

学校网站建设方案里面主要包含哪些内容呢?

石家庄网站关键词优化之网站词库企业关键词的建立

企业网站建设中有哪几个重要点?

【seo优化公司】快速提升网站权重的几个方法?

网站取消备案和注销备案到底有什么区别?