Rumah > Artikel > hujung hadapan web > 关于JavaScript如何实现导航栏吸顶操作的实例分享
关于JavaScript如何实现导航栏吸顶操作的实例分享
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { padding:0; margin:0; } #nav { width:100%; height:60px; background:#39f; color:#fff; line-height:60px; text-align:center; padding:0; margin:0; list-style:none; } #nav li { float:left; width:20%; height:60px; } .fix { position:fixed; top:0; left:0; } </style> </head> <div class="wrap"> <h1>在线书城</h1> <p>有没有一本书让你仿佛遇到春风十里</p> <ul id="nav"> <li>加入购物车</li> <li>加入收藏</li> <li>立即购买</li> </ul> <div class="con"> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> <p>好书有好事有好诗</p> </div> </div> <script type="text/javascript"> var tit = document.getElementById("nav"); //alert(tit); //占位符的位置 var rect = tit.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置 var inser = document.createElement("div"); tit.parentNode.replaceChild(inser,tit); inser.appendChild(tit); inser.style.height = rect.height + "px"; //获取距离页面顶端的距离 var titleTop = tit.offsetTop; //滚动事件 document.onscroll = function(){ //获取当前滚动的距离 var btop = document.body.scrollTop||document.documentElement.scrollTop; //如果滚动距离大于导航条据顶部的距离 if(btop>titleTop){ //为导航条设置fix tit.className = "clearfix fix"; }else{ //移除fixed tit.className = "clearfix"; } } </script> </html>
当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部,一般吸顶导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。它们共同点是在内容或者功能上比较重要,但又不是最重要的元素,最重要的一般会放置于顶部。
1.实现思路是监听 scroll 事件,判断当前页面的滚动位置,当滚动距离大于导航条距顶部的距离时,为导航条采用窗口定位。
2.与“回到顶部“的实现方法一样,但是会发现实现吸顶功能时,到了临界位置时,页面会抖动一下,因为当导航条fixed出去,下部内容填补了导航条离开的位置。抢占了导航条的位置,所以抖动了一下。此处我们设置一个占位符,守住导航条的位置。
效果如下:
Atas ialah kandungan terperinci 关于JavaScript如何实现导航栏吸顶操作的实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!