HTML5如何才能让导航栏固定顶部不动,且!且!且!不遮挡住下面的DIV...
发布网友
发布时间：2022-04-23 04:00
共5个回答
懂视网
时间：2022-05-12 05:15
吸顶功能
吸顶是一种比较常见的交互效果，当页面滑出屏幕边界，标题会自动吸附在屏幕边缘，用于提示用户。
基本原理
在H5中实现的基本原理就是判断当前页面滑动的距离scrollTop和标题距离页面顶部距离offsetTop的关系，进而设置标题的position = fixed。这里需要明白scrollTop和offsetTop属性的含义。
scrollTop
代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
offsetTop
当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
所以，当scrollTop>offsetTop时，title的position = fixed，top = 0,使之固定在屏幕上方；当scrollTop < offsetTop,取消position = fixed，代码如下：
if (fixedDom[0].offsetTop - elementScrollTop < 0){
fixedDom.addClass("road-tab-fixed")
}else {
fixedDom.removeClass("road-tab-fixed")
}效果如下：
优化
有图看出基本功能实现的差不多了，但是感觉哪里怪怪的。当页面向上滑时效果还是比较自然的，但是当页面下滑时，只有当页面完全滑到顶部时，标题才会回到原位，导致过度不自然，所以对于titile的position的设定要分两种情况：上滑和下滑。
判断上下滑动方向
判断上下滑动点击此处
当页面上滑时
当scrollTop>offsetTop时，title的position = fixed，top = 0,使之固定在屏幕上方；
当页面下滑时
当scrollTop<offsetTop时，取消掉fixed属性，这样就会使标题跟随页面滑动下来，交互更加自然了，
代码如下：
if(beforeElementScrollTop - elementScrollTop <=0){//up
console.log('up');
if (beforeOffsetTop - elementScrollTop < 0){
fixedDom.addClass("road-tab-fixed")
}
}else{
console.log('down');
// console.log('beforeOffsetTop-----------',beforeOffsetTop);
// console.log('elementScrollTop--------------',elementScrollTop);
if (beforeOffsetTop - elementScrollTop >= 0){
fixedDom.removeClass("road-tab-fixed")
}
}效果如下：
优化之scroll节流
当对页面监听了scroll事件后，滑动时scroll的回调会一直在执行，影响到页面性能，而节流只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。代码如下
const fixedDom = $("#road-tab"),
isIos = utils.getMobileType(),
tabclass = "road-tab-fixed";
let beforeElementScrollTop = 0;
let beforeOffsetTop = fixedDom[0].offsetTop;
//scroll节流
const throttle = (func,wait,mustRun) => {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date()
clearTimeout(timeout)
// 如果达到了规定的触发时间间隔，触发 handler
if(curTime - startTime >= mustRun){
beforeElementScrollTop = document.body.scrollTop;
console.log("beforelementScrollTop----------",document.body.scrollTop);
func.apply(context,args);
startTime = curTime
// 没达到触发间隔，重新设定定时器
}else{
timeout = setTimeout(func, wait)
}
}
}
const winScroll = (e) => {
const elementScrollTop=document.body.scrollTop;
console.log('elementScrollTop--------------',elementScrollTop);
if(beforeElementScrollTop - elementScrollTop <=0){//up
console.log('up');
if (beforeOffsetTop - elementScrollTop < 0){
fixedDom.addClass("road-tab-fixed")
}
}else{
if (beforeOffsetTop - elementScrollTop >= 0){console.log("UUUUUU");
fixedDom.removeClass("road-tab-fixed")
}
}
};
$(window).off("scroll").on("scroll", throttle(winScroll,10,100));
热心网友
时间：2022-05-12 02:23
HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下：
1，首先在html中，添加良好的导航内容。
2，后者是网页的具体内容，这里的代码比较简单。
3，在样式中，首先在菜单中定义一些样式。
4，此时，在运行页面时，滚动条滚动后导航将消失。
5，为了将导航栏固定在顶部，可以添加样式位置：固定；最高：0;在导航容器中，键是第一个样式，因此其位置是固定的。
6，此时，页面开始运行，页面向上滚动，并且导航始终在顶部。
热心网友
时间：2022-05-12 03:41
1、新建一个文件夹，用来存放网页文件和图片，快捷键ctrl+shift+n。
2、进入新建文件夹里面，右键新建文本文档。
3、进入新建的文本文档，复制下方代码，点击快捷键ctrl+s保存后退出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin: 0 auto;color:#F6F6F6;}
/*注：t1的宽度是100%跟其他div的宽度不同，如果分辨率高于1100宽度的时候，t1会突出来，这是你原先代码的。*/
/*position:fixed;这个fixed属性为块状，他跟absolute一样，不会独占一行。z-index: 2;属性就是让他显示在其他div的上层*/
.t1{position:fixed; width:100%; height:50px; background: #000000;z-index: 2;}
.t2{width:1100px;height:100px;background:#2266FF;}
.t3{width:1100px;height:100px;background:#5577FF;}
.t4{width:1100px;height:100px;background:#3344FF;}
.t5{width:1100px;height:100px;background:#5577FF;}
.t6{width:1100px;height:100px;background:#3344FF;}
/*t01的position: relative;这个是独占一行的属性，在这里相当于占位符的作用。height: 50px;这里的50像素高度要等于t1的高度。background:none;背景设置成空白或者透明，这里设不设置都没关系，因为他没有加z-index这个属性，他默认的属性为0，即显示在t1图层的下面*/
.t01{position: relative;height: 50px;background:none;}
</style>
</head>
<body>
<div class="t1">T1这是希望固定不动的DIV</div>
<div class="t01"></div>
<div class="t2">T2</div>
<div class="t3">T3</div>
<div class="t4">T4</div>
<div class="t5">T5</div>
<div class="t6">T6</div>
</body>
</html>
4、重命名新建文本文档为index.html，原先的.txt的后缀同时去掉后保存，提示确实要更改后按“是”即可。
5、点击index.html，右键浏览器打开预览效果，打开后即可得到如下效果。
热心网友
时间：2022-05-12 05:16
1、首先在我们的html里，添加好导航内容。
2、后面的就是网页的具体内容了，这里的代码简单一些。
3、样式里，我们先定义一些菜单里的样式。
4、这时运行页面时，在滚动条滚动下去后，导航是会消失不见的。
5、为了让导航栏固定在顶部，我们可以在导航容器里添加样式position: fixed;top: 0; 关键是第一个样式，让它的位置固定起来。
6、这时运行页面，页面滚动起来，导航也始终在顶部的。
热心网友
时间：2022-05-12 07:07
按照说的方法解决也不对啊...按您说的方法改后，不仅没有解决反而还加大了和顶部的距离了
见录制的GIF
首先是修改后在IE测试，后面是在chrome里测试，鉴于结果，就没去火狐等其他测
你这是给t2加了top值吧，t2的top:0,要这样的， position：fixed; 兼容ie8+
