一个比较靠谱的原生js导航悬浮

我不太会写js,但是今天看了我上一篇文章的代码里以后也写了一个原生js,没想到z哎我这里显得比那个好用,你们知道那种感觉么,感觉自己一下子就有如神助一样。

感谢覃烁弟弟,我这人生低谷给我写了一封信。还推荐给我一个群,这个群里果然都不是水啊,天天都在讨论技术,就算我不懂,但这里氛围也是极好的!

哈哈哈哈

不说废话了,好好学习

贴代码

我的js水平连幼儿园小朋友都可以看得懂

大家就当入门吧

js:

window.onload=function(){
    var nav=document.getElementById(‘nav‘);
    var navFixed=document.getElementById(‘navFixed‘);
    window.onscroll=function(){

var scrollTop=document.documentElement.scrollTop;
        if (scrollTop>90){
            navFixed.style.display="block";
        }
        if (scrollTop<90) {
            navFixed.style.display="none";
        } else{};
    }
};

是不是和上一篇很像呀~

css:

.Navi,.NaviFix{color:#fff;width: 100%;background-color: #000;z-index: 1000;}
    .Navi li,.NaviFix li{float: left;line-height: 100px;}
        .Navi li a,.NaviFix li a{color: #fff;font-size: 24px;width:163px;display: block;height: 100px;width: 163px;}
            .Navi li a:hover,.NaviFix li a:hover{color: #fff;font-size: 24px;width:163px;background-color: #292929;line-height: 100px;height: 100px;}
.NaviFix{position: fixed;top: 0px;}
.Navi{position:absolute;top: 0px;}

html:

<div class="Navi">
                    <ul id="nav" class="clearfix">
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                    </ul>
                </div>
                <div id="navFixed" class="NaviFix" style="display:none;">
                    <ul id="navFixed" class="clearfix">
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                        <li><a href="">aaa</a></li>
                    </ul>
                </div>

不得不感慨年轻就是好

我记得我17岁的时候也是谁都关心,谁的事儿都想帮一把。深深地一副我们都是社会主义接班人的样子

同班同学小学同学亲戚朋友没有一个我不关心的

真的很想回到那个纯净的天空里去~我还是一个开心快乐的我

好好干活了

时间: 2024-10-12 22:36:07

一个比较靠谱的原生js导航悬浮的相关文章

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b

放弃jQuery,使用原生js吧!

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

使用原生JS实现一个风箱式的demo,并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. 1 function getStyle(obj,attr) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr];//为了获取IE下的属性值 4 }else{ 5 return window.getComputedStyle(ob

原生js做一个简单的进度条

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素. 主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止 效果如下: 一 css如下: *{ margin: 0; padding: 0; } #box{ width: 500px; height: 30px; margin: 50px auto; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 15px;

原生js实现一个DIV的碰撞反弹运动

 原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back