马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2017-11-23 15:54 编辑
按照提示，完成代码，秀秀你的编程能力！
不许看答案，否则打屁屁
分析：
在很多长页面中，为了让导航条总是显示在可视范围内，需要让导航条悬浮。
Code：
HTML：<div id='suspendNavigation'>
<h2>页面悬浮导航</h2>
<span id="tst"></span>
<div><a href='http://www.fishc.com' target="_blank">导航1</a></div>
<div><a href='http://www.fishc.com' target="_blank">导航2</a></div>
<div><a href='http://www.fishc.com' target="_blank">导航3</a></div>
<span id="tst"></span>
<span id="tst1"></span>
</div>
<div class="content">
<!-- lorem假文，专门用来填充页面的 -->
<p>Welcom to FishC.com
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS：<style>
a{
text-decoration:none;
}
/*===================页面悬浮导航=======================*/
/*设置导航栏初始布局*/
#suspendNavigation{
top:0;
position: absolute;
background-color: #ccc;
width: 100%;
height: auto;
}
/*设置导航栏固定样式，通过下方js代码才会触发*/
/*默认<div id='suspendNavigation'>标签没有.fix类*/
/*触发条件后，该标签会有class="fix",然后出发固定操作*/
#suspendNavigation.fix{
opacity:0.7;
z-index: 1111;
width: 100%;
position: fixed;
top: 0;
}
/*设置导航栏中的div*/
#suspendNavigation div{
position: relative;
float: left;
border: #cc2123 1px solid;
width: 33%;
height: 30px;
text-align: center;
line-height: 30px;
}
/*设置文本基本样式*/
.content{
position: absolute;
top:115px;
height: 1999px;
}
</style>
JS：<script type="text/javascript">
// 按照id绑定dom元素，获取导航栏对象
var suspendNavigation=document.getElementById("suspendNavigation");
// 获取对象相对于body元素距离顶端的高度。
// 此时为0
var pagenav_top = suspendNavigation.offsetTop;
// 滚动事件被触发
window.onscroll = function(){
// body对象距离距离顶部的滚动距离
// 没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
var scrollTop = document.body.scrollTop;
if(scrollTop < pagenav_top){
suspendNavigation.className = "";
}else{
suspendNavigation.className = "fix";
}
}
</script>
请按照自己的理解订正对概念的认知
代码说明（秀智商） ：
回顾：
源代码：
80.zip
(1.61 KB, 下载次数: 11, 售价: 6 鱼币)
如果喜欢，请订阅 ：
如果喜欢，别忘了评分 ：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-11-23 15:54:26
置顶卡
千斤顶
显身卡
发表于 2017-12-7 18:19:55
发表于 2018-3-10 15:12:25