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

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

思路

通过浏览器窗口的长和宽,和元素的长宽,计算出位置,最后绝对位置显示

具体计算为:

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>
相关文章
|
5月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
|
6月前
|
设计模式 JavaScript 前端开发
|
10天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
10天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
11天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
11天前
|
JavaScript 前端开发
【Web 前端】jQuery 库中的 $() 是什么?
【5月更文挑战第1天】【Web 前端】jQuery 库中的 $() 是什么?
|
14天前
|
前端开发 开发者 容器
【Web 前端】相对定位,绝对定位,固定定位的区别?
【4月更文挑战第22天】【Web 前端】相对定位,绝对定位,固定定位的区别?
|
2月前
|
前端开发 JavaScript API
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
46 0