我用css定位了导航,怎么当网页下拉到一定高度的时候变成悬浮的?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我用css定位了导航,怎么当网页下拉到一定高度的时候变成悬浮的?相关的知识,希望对你有一定的参考价值。

我想用css定位导航,当下拉页面到一定高度的时候把导航变成悬浮。。。

1、正常布局网站,导航栏也正常布局。
2、自定义导航栏制作(可复制原来的导航栏,也可以另制作一份),绝对定位,隐藏。
3、在页面scroll事件中进行判断,滚动到指定像素位置,自定义的导航栏出现,并且随着scroll事件对top值不断更新,一句jquery的scrollTop。
4、如果向上回滚,判断scrollTop值,隐藏自定义导航栏。
参考技术A 光用css是不能的 参考技术B 光用css是不能的,用jQuery 参考技术C

这个要用js来判断的,下面这个是例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../css/global.css"/>

<style type="text/css">
<!--
/***比较页***/
body_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
_background-attachment: fixed;  /* 确保滚动条滚动时,元素不闪动*/
/***比较浮层***/
.compareDivbackground:#d6e7f5; border:1px solid #6eaadb; width:958px; font-weight:bold; padding:7px 0
.compareDiv .inBoxposition:relative; width:100%;
.compareDiv .inBox .theadfont-weight:lighter;
.compareDiv tabletable-layout:fixed
.compareDiv table tdoverflow:hidden;word-wrap:break-word;  text-align:center;
.compareDiv spanheight:18px; overflow:hidden; display:block; padding:0 5px
.bjTable .compareDiv td, .bjTable .compareDiv th background:#d6e7f5;
.comDivposition:fixed; top:0; z-index:999;_position:absolute;_top: expression(documentElement.scrollTop);overflow:visible;
.compareDiv .arrowwidth:13px; height:15px; padding:0; position:absolute; top:-2px; right:5px; display:block;background:url(../images/duibi.gif) no-repeat 0px -75px; cursor:pointer

 -->
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
  //浮动
  $(function()
   var h = $('#warpDiv').offset().top;
        $(window).scroll(function()
        if($(window).scrollTop() >h )$('#compareDiv').addClass('comDiv');
        else$('#compareDiv').removeClass('comDiv');
        );
  )
      
 -->
</script>
</head>

<body>
<div class="wrap">
<div style="height:300px;"></div>
<div id="warpDiv"></div>
<div class="compareDiv" id="compareDiv">
                    <div class="inBox">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <th class="aLink">
                            <td width="119" class="thead">产品名称</td>
                            <td width="198" class="td1"><span><a href="#" target="_blank">苹果 iPhone 4(16GB)</a></span></td>
                            <td width="173" class="td2"><span><a href="#" target="_blank">诺基亚 C5-03</a></span></td>
                            <td width="185"><a href="#" target="_blank">&nbsp;</a></td>
                            <td width="160"><a href="#" target="_blank">&nbsp;</a></td>
                            <td width="123"><a href="#" target="_blank">&nbsp;</a></td>
                          </th>
                        </table>
                    <i class="arrow" onclick="document.getElementById('compareDiv').style.visibility='hidden';"></i>
                    </div>
                </div>
                
                <div class="blank10"></div>
                <div style="height:1500px; background:#FFFFCC;"></div> 
     <div class="footer"></div>
              
 </div>               
</body>
</html>

本回答被提问者采纳
参考技术D 这个效果叫智能浮动层效果 百度出来一坨

手机网页开发 手机网页怎么改变下拉select option菜单默认效果

我用select option标签写的下拉菜单。并用css写了相应的样式效果。在电脑浏览网页显示是想要的样式效果。用手机浏览器打开,下拉框显示正常。但是当点击小三角时,在手机底部弹出菜单,样式是手机系统自带的效果。我写的CSS不起作用。有没有手机网页开发的朋友帮忙看一下怎么解决。
自己已解决!

用背景图啊,在select里面设置个背景图,就是个样式,把他放到三角形的位置 参考技术A 你是怎么解决的?

以上是关于我用css定位了导航,怎么当网页下拉到一定高度的时候变成悬浮的?的主要内容,如果未能解决你的问题,请参考以下文章

现在很流行的网页下拉加载动画效果,是用啥技术实现的呢?只用了js和css3吗?请知道的人详细回答

css:为啥我用div来定位没起作用了,id没有错,只是完全没反应,请问可能的原因都有哪些

手机网页开发 手机网页怎么改变下拉select option菜单默认效果

导航栏实现横向滑动效果

css中导航栏子菜单横向下拉改为水平下拉

为啥我用CSS设计的页面 没有滚动条 不能下拉