PHP技术,PHP研究及学习,Python学习,人工智能,大数据服务

PHP+Python » 前端设计 » 前端开发:滚动网页导航固定在顶部

前端开发:滚动网页导航固定在顶部

此文被围观2607日期: 2013-05-08 分类 : 前端设计  标签:  ·····
新的一个项目要求:滚动网页,但是导航条固定在顶部。 主要是产品搜索页面!当产品列表很长时,搜索条件固定在顶部,提高用户的体验感! [html] <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery.js" ></script> <script type="text/javascript"> function dhDiv(ee1){ //导航距离屏幕顶部距离 var _defautlTop = $("#"+ee1).offset().top - $(window).scrollTop(); //导航距离屏幕左侧距离 var _defautlLeft = $("#"+ee1).offset().left - $(window).scrollLeft(); var _top = $("#"+ee1).css('top'); var _left = $("#"+ee1).css('left'); var _zIndex = $("#"+ee1).css('z-index'); //鼠标滚动事件 $(window).scroll(function(){ if($(this).scrollTop() > _defautlTop){ //IE6不认识position:fixed,单独用position:absolute模拟 if($.browser.msie && $.browser.version=="6.0"){ $("#"+ee1).css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999}); //防止出现抖动 // $("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'}); }else{ $("#"+ee1).css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999}); } }else{ $("#"+ee1).css({'position':'static'}); } }); } $(function(){ window.onscroll = function(){ dhDiv('box_tools'); } window.onresize = function(){ dhDiv('box_tools'); } }); </script> </head> <body style="background-color:#e6e6e6;"> <input type="hidden" id="topv" /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="box_tools" style="width:90%;border:5px solid #f00;padding:20px;background-color:#fff;"> 这是测试页面! </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html> [/html] 导航条滚动到顶部时固定在页面上方

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.