导航随着页面一直在置顶

最新推荐文章于 2021-10-12 14:56:48 发布
最新推荐文章于 2021-10-12 14:56:48 发布
阅读量345 收藏 1
点赞数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 
<title>限制div高度，内容多了显示滚动条</title> 


</head>


<body>


<style type="text/css">


#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}


</style>


<script type="text/javascript">


var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 3 //set y offset of bar in pixels


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


var verticalpos="fromtop"


function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}


function staticbar(){


var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}


if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.οnlοad=staticbar
</script>
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://www.smallrain.net/jsimg/close1.gif" border="0" /></a>
这里显示内容
</div>
<table style="height:2200">　</table>
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br />
<p>11111111</p><br /> 
</body>
</html>
尼古拉蹦蹦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果
itclanCoder
01-30 947
前言我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部这是为了方便用户查看商品的各类信息或提交订单购物也就是吸顶盒效果,那这个效果是怎么实现的?原生Js如下是原生js//初始化函数 functioninit(){ //获取顶部元素的DOM varwrap=document.getElementById("...
导航栏置顶
蹲在人生路上的那只猫
07-06 1478
1、实现顶部和侧边导航吸顶，侧边导航在footer接触导航底部时被上顶。 2、效果图 3、代码段 顶部导航 顶部导航 顶部导航 顶部导航 顶部导航
监听导航滚动置顶
08-18 112
1.js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //设置导航标签为置顶; var offsetTop=navtive.offset().top; //定义一个监听高度; var scrollHei...
js实现导航条置顶
xiaowang_test的博客
10-12 1036
实现的效果大概是，滚动条往下滚动至导航条被隐藏时，将导航条置顶；滚动条往上滚动至导航条出现时，回到原来位置。 大致逻辑是先获取导航条距离页面顶部的高度，滚动条滚动时，动态获取页面被卷起的高度； 将导航条距离页面顶部的距离与页面被卷起的高度作比较。 html代码 <div id="nav" style="width: 1200px;max-height: 100px"> <div>导航条内容</div> </div> js代码
jQuery页面滚动置顶导航特效代码
03-20
总的来说，"jQuery页面滚动置顶导航特效代码"是一个提高网站交互性的实用工具，它利用jQuery的强大功能和灵活性，实现了导航栏在页面滚动时的动态效果。通过学习和应用这个特效，开发者不仅可以提升网站的视觉吸引力...
jQuery阅读进度条导航置顶特效
07-24
这种特效结合了jQuery库、进度条元素和导航置顶功能，为用户提供了一种直观的方式来跟踪他们在长文章或页面中的位置。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互...
导航跟随滚动条置顶移动示例代码
09-05
滚动条滚动时如何让导航置顶移动，这种效果已经在很多网看到了，所以本文也来实现一个，感兴趣的朋友可以学习下
jQuery页面滚动置顶导航代码.zip
07-04
在网页设计中，导航栏是不可或缺的部分，它帮助用户在网站各页面间便捷地切换。jQuery页面滚动置顶导航代码正是解决这个问题的一种技术方案。这个压缩包“jQuery页面滚动置顶导航代码.zip”包含了实现这一功能所需的...
jquery导航置顶.zip
07-04
而当用户向下滚动页面时，一个固定在顶部的导航栏（也称作“置顶”或“吸顶”效果）能够始终保持可见，提供持续的导航服务。在本文中，我们将深入探讨如何使用JavaScript库jQuery来实现这一功能。 首先，让我们了解...
html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果
weixin_42390070的博客
05-31 1934
今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。一、css部分：fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。二、这个效果使用了jquery的方法实现，具体思路为：1、首先获得已经滚动上去的高度2、让导航...
滚动到一定位置时导航栏置顶-vue
qq_39905409的博客
08-19 2631
获取距离的id元素和添加样式的元素可以是包含关系也可以是并列关系 <div id='testNavBar'> <div :class='{ fixedNavbar: isfixTab }'>这是导航</div> </div> 或 <div id='testNavBar'></div> <div :class='{ fi...
怎么将导航栏始终固定在窗口顶部,类似bootstrap 的navbar-fixed-top
热门推荐
zunguitiancheng的专栏
02-16 2万+
http://www.myexception.cn/HTML-CSS/1964410.html 在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例: 蚂蚁部落 *{   padding:0px;   marg
实现滚动到一定位置时，导航栏置顶的效果
Kratial的博客
10-01 1万+
html部分: &amp;lt;body&amp;gt; &amp;lt;h1&amp;gt;标题1&amp;lt;/h1&amp;gt; &amp;lt;h1&amp;gt;标题2&amp;lt;/h1&amp;gt; &amp;lt;h1&amp;gt;标题1&amp;lt;/h1&amp;gt; &amp;lt;h1&amp;gt;标题2&amp;lt;/h1&amp
置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部
林中明月间丶
03-07 3398
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;jQuery页面滚动置顶导航代码&lt;/title&gt;&lt;style type="text/css"&gt;*{ margin:0; padding:0;}body{ backg
html之置顶菜单-滚动到顶部
Quincy.Coder的博客
10-16 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>置顶菜单</title> <script type="text/javascript" src="./jquery-3.2.1.min.js"></script> <script type="text/javascript">
置顶菜单栏和滚屏效果的实现
ZBQ857143497的博客
04-07 2047
一、首先是置顶菜单 ，在需要置顶的div上添加属性 position:relative; z-index:99999; 参考：http://blog.sina.com.cn/s/blog_67373f630100vsl3.html 二、滚屏效果的实现 1、全屏滚屏效果：引入fullPage.js 演示：http://www.dowebok.com/191.html 学习：http://
uniapp页面置顶下拉刷新
最新发布
11-26
而要实现置顶功能，可以使用 `scroll-view` 组件，并在 `scroll-view` 上监听 `scroll` 事件，当滚动距离大于一定值时，显示置顶按钮，点击按钮后将滚动距离设置为0即可。以下是一个示例代码： ```vue <!-- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值