Article / 文章中心

前端:侧边固定导航栏jQuery实现定位

发布时间:2021-11-23 点击数:167

具体计算为:

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

代码示例

<!--css开始--> <style>  .site-nav{  width: 100px;  }  .hide{  display: none;  } </style>  <!--底部js开始--> <script>  //将导航条固定在中间  $(document).ready(function(){   var nav = $(".site-nav"); //.site-nav为导航栏类  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>