18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

企业官网之左侧固定导航

2019-12-21 分享
在企业官网建设中,像商城类的首页或者一个宣传很长的宣传页,总需要一个一直固定在屏幕一侧的导航条,这样可以让用户体验更好。一定需要避免传统的只在顶部左侧的死板写法,这样一个版面多个内容会无法兼顾。下面分享个简单的导航固定在屏幕一侧中间的写法。思路是获取当前屏幕宽高,直接定位。当然这种写法如果头部还有其他内容,最好再加上一个显示判断,大于头部的高再显示,这样更完美。

页面

<div class="sidebar">
<ul>
<li><a href="#1"></li>
<li><a href="#2"></a></li>
</ul>
</div>

固定在屏幕中间(高度加宽移动距离)

top = (浏览器高 - 元素的高) / 2
left = 浏览器宽 / 2 + 需要向右边移动的距离

<style>
.hide{display:none;}
</style>

<script>
    //将导航条固定在中间
     $(document).ready(function(){

         var nav = $(".sidebar"); //.sidebar为导航栏类
         nav.css("position", "fixed");
         nav.removeClass("hide");  //hide是单独写的隐藏类

         //计算位置 
         var h = ($(window).height()-nav.height())/2 ;
         var w = $(window).width()/2 + 390; //数字可以视情况调整

         nav.css("left", w);
         nav.css("top", h);

     })
</script>
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图