懒加载和浮现导航条的js基础代码

最新推荐文章于 2021-05-13 10:15:34 发布
最新推荐文章于 2021-05-13 10:15:34 发布
阅读量237 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/102749211
版权

在这里插入图片描述

获取屏幕的scrollY，当屏幕大于一定的数值时，让原本不现实的内容让他显示，懒加载是再加上一些动画，让他逐渐浮现。

有一些无用的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,body{
				height: 5000px;
				width: 100%;
			}
			.d1{
				width:100% ;
				height: 50px;
				background-color: black;
				/* position: fixed; */
				
			}
			#fixednav{
				position: fixed;
				top: -50px;
				transition: all .4s;
				background-color: red;
			}
             #p{
				 opacity: 0;
				 font-size: 50px;
				 margin-top: 0px;
				 transition: all 1s;
			 }
			 #p.active{
				 margin-top: -50px;
				 opacity: 1;
			 }
		</style>
	</head>
	<body>
		<div class="d1" id="fixednav">
			
		</div>
		<div class="d1" id="staticnav">
			
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<p id="p">1000000玩柔光下派，照亮你的美</p>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	
		<br>
		<br>
		<script type="text/javascript">
			
			
	// 		var d1 = document.getElementById('d1')
	 		//document对应整个文档
	// 		//window对应整个浏览器
	 		// window.document
	 	 //window对象的常用属性and方法and事件
	// 	 window.innerHeight
	// 	 window.innerWidth
	// 	 window.console.log('ssss' ,'color:rgb(255,0,0)')
	// 	 window.console.warn('error','color:red')
	// 	 window.console.error('ddd')
		 // console.clear()
	// 	 console.time('text-for')
	// 	 for(i=0;i<10;i++){
			 
	// 	 }
	// 	 console.timeEnd('text-for')
		 
	// 	 //window弹窗
	// 	 alert('nizhendeyaozoume')
		 
	// 	var aaa =  confirm('nizhendeyaozoume ')
	// 	if(aaa){
	// 		document.body.innerHTML= 'nizouba'
	// 	}else{
	// 		document.body.innerHTML=  '*****'
	// 	}
	// 	//可以输入信息
	// 	if(confirm('你是女生么')){
	// 			var text = prompt('请输入你的号码')
	// 		}else{
	// 			// window.location.href='https://baidu.com/s？wd=整容'
	// 		}
	// 		clear()
	// 
	//   window.document
	//    window.location
	//    window.
	//   var b= window.navigate()
	//   parseInt()
	//   parseFloat()
	//   window对象常用的事件
	  // var a = document.getElementById('b')
	  // window.addEventListener('resize',function(){
		 //  console.log('resize事件触发')
		 //  a.style.fontSize = this.innerWidth/20 + 'px'
	  // })
	  
	  // window.addEventListener('scroll',function(e){
		 //  console.log('scrool')
		 //  console.log(window.scroll)
	  // // })
	  var dd= document.getElementsByClassName('d1')
	  var d1 = document.getElementById('fixednav')
	  var p= document.getElementById('p')
	  window.addEventListener('scroll',function(){
		  console.log('scroll')
		  console.log(window.scrollY)
		  if(window.scrollY>50){
			  d1.style.top = '0px'
		  }else{
			  d1.style.top =  '-50px'
		  }
		  if(window.scrollY>3200){
		  		p.className = 'active'
		  }
	  })
	 
	  
	  
	  
		</script>
	</body>
</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现特效导航条
越陌度阡
07-27 1075
分享一个用原生JS实现的特效导航条，效果如下： 实现代码如下： <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>原生JS实现特效导航条</title> <style> body { mar............
原生JS实现网页导航条特效
越陌度阡
06-02 3852
给大家分享一个用原生JS实现的比较实用的网页导航条特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现
原生js实现导航条动画
逍遥的码农的博客
05-13 353
原生js实现毛毛虫导航 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> * { margin
用JavaScript实现一个简单动态导航条
mddgxz的博客
04-15 3969
虽说是js实现，但是其中是引入了jq，将它们封装成jq对象，所以js中的代码只有两行，代码看起来多是因为写的样式多。 实现的主要功能为：当鼠标放到导航栏上面的链接时，链接下方的链接元素也会显示出来，当移除鼠标时，将收缩上去不显示。 <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0;
超级炫酷的效果js实现动画导航菜单
02-15
/找到除空格外所有的子对象 function getChilds (obj) { var childs=obj.childNodes; var arr=[]; for (var i=0; i<childs.length; i++) { //if(childs[i].nodeType==3 && /^\s+$/.test(childs[i].nodeValue)){ if(childs[i].nodeType==3){ continue; }else{ arr.push(childs[i]) } } return arr; } //通过类名获取对象 function getClass (classname,obj) { var obj=obj||document; var arr=[]; if(document.getElementsByClassName){ return obj.getElementsByClassName(classname) }else{ var alls=obj.getElementsByTagName("*"); for (var i=0; i<alls.length; i++) { if(alls[i].className==classname){ arr.push(alls[i]) } } } return arr; } // function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { // return !!(parentNode.compareDocumentPosition(childNode) & 16); return (parentNode.compareDocumentPosition(childNode) ===20); } } function checkHover(e,target){ if (getEvent(e).type=="mouseover") { return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target); } else { return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target); } } function getEvent(e){ return e||window.event; }
Android：Fragment与导航栏的“懒加载”
Xu_JL1997的博客
03-29 832
2018 写在前面：这篇文章主要分析导航栏，也就是ViewPager+Fragment+FragmentPagerAdapter的懒加载模式，重点还是Fragment生命周期的应用。 如果对如何使用导航栏还不太了解，可以看看 底部导航栏标签切换的实现 这篇文章。 （一）Fragment生命周期 大家都知道 Fragment 是绑定 Activity 的，不过，很多人会忽视了它们的生命周期也是会...
快速实现JS图片懒加载(可视区域加载)示例代码
11-28
js懒加载图片 如何提高网页加载速度？在网页中有许多img标签，这些标签就是图片，其属性src则是指向服务器地址，当浏览器从上往下读取到src标签中的地址时，浏览器就会开启线程，加载这张图片。而并不是等到整张页面...
iOS 懒加载的使用实例代码
01-20
昨天晚上写的那个代码在配置数组数据的时候突然想到加载数据的时候可以不用在viewDidLoad中加载，可以什么时候用什么时候加载，这种技术就是这篇文章的懒加载方法。然后记录一下。内容如下： 什么是懒加载 懒加载又...
基于Javascript和TypeScript的Vue懒加载插件设计源码
最新发布
05-27
本设计源码提供了一个基于Javascript和TypeScript的Vue懒加载插件，包含7976个文件，其中包括6209个js脚本文件，511个json数据文件，492个md文档，99个npmignore文件，77个yml配置文件，26个jst文件，21个priv文件，...
Vue代码分割懒加载的实现方法
01-19
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的...
【前端新手之路第五天】横向导航栏，html+css+js原生代码
relaxingwind的博客
10-20 4366
今天参加了某个公司的笔试，笔试的题是比较熟悉，但是自己不能保证自己完全正确，就发现自己有些眼高手低了。 来，大家跟我一起喊：键盘敲烂，月薪过万。 换肤 *{ padding: 0; margin: 0; }/*一定要设置，ul,li等元素有默认的margin，padding。不手动去掉
JS实现导航栏
u010178118的专栏
06-05 1万+
使用js实现一个简单的导航栏。利用js实现某种效果的步骤：1.实现CSS布局；2:js的实现原理；3.写CSS代码。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> ul { padding:0px; marg
用css+js制作可自动伸缩导航栏
sunOpar的博客
02-02 2814
作者的话偶然一个机会，在网上看到一篇ted公开课【让我们教孩子编程吧】 里面有一个实例，说是一个小男孩制作了一个大鱼吃小鱼的游戏，他想为这个游戏做一个计分板（吃一条鱼加一分），便他在网上求教，后来被网站创作者发现后，告诉了他答案：变量。通过这个学到的知识点【变量】也许小男孩永远不会忘记。从中可以看出，通过需求学习编程往往比为了学编程而学习编程要记得更劳并且更有价值。这也对我之后的学习以及写作产生的
用JS写的一个简单的导航栏
热门推荐
聂亚兵的博客
09-05 1万+
选项卡 * { margin: 0; padding: 0; } span { display: inline-block; margin-left: 30px; width: 150px; height: 40px; background: #FFFFFF; border-bottom: 2px so
html页面导航栏javascript代码
颠4倒3
10-05 8443
首先说明代码也是拿来的，从Dreameawer的源代码提取的，不过经过自己的修改，减少了代码的书写量，更容易懂得  下面是HTML 页面文件代码:     注意注释说明~！html>head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>导航栏title>
JavaScript原生代码实现导航栏小效果
清水
01-23 5936
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
js二级导航菜单代码实例
Return_KB的博客
01-10 5955
分享一个比较简单的二级导航菜单效果。 鼠标悬浮菜单能够出现二级菜单，代码实例如下: 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052
js左侧三级菜单导航代码
Hi,印象钟情
11-02 3375
效果演示：   实例代码：   demo <!-- body {  font-family: Arial, Helvetica, sans-serif;  font-size: 11px; } #nav, #nav ul {  list-style: none;  background: #F9F9F9;  font
vue中图片懒加载js代码
05-14
Vue中可以使用第三方库vue-lazyload实现图片懒加载。具体步骤如下： 1. 安装vue-lazyload库 ``` npm install vue-lazyload --save ``` 2. 在main.js中引入vue-lazyload库并配置 ```js import Vue from 'vue' ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值