HTML5如何才能让导航栏固定顶部不动,且!且!且!不遮挡住下面的DIV...

发布网友发布时间：2022-04-23 04:00

我来回答

共5个回答

懂视网时间：2022-05-12 05:15

吸顶是一种比较常见的交互效果，当页面滑出屏幕边界，标题会自动吸附在屏幕边缘，用于提示用户，这篇文章主要介绍了Html5之title吸顶功能的相关资料，感兴趣的小伙伴们可以参考一下

吸顶功能

吸顶是一种比较常见的交互效果，当页面滑出屏幕边界，标题会自动吸附在屏幕边缘，用于提示用户。

基本原理

在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>

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>

</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

思路不对，解决办法不是在t1上，而是在t2上，给t2添加一个css，margin-top:50px;即就是你t1的高度追问

按照说的方法解决也不对啊...按您说的方法改后，不仅没有解决反而还加大了和顶部的距离了

见录制的GIF

首先是修改后在IE测试，后面是在chrome里测试，鉴于结果，就没去火狐等其他测

追答

你这是给t2加了top值吧，t2的top:0,要这样的， position：fixed; 兼容ie8+