码迷,mamicode.com
首页 > 其他好文 > 详细

实现侧边导航栏的悬浮设置

时间:2019-11-20 12:23:29      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:pre   position   bsp   http   pos   nbsp   java   滚动   png   

首先看效果图:

最开始鼠标没有滚动的时候:

技术图片

 

 当鼠标滚动下拉到一定高度的时候:

技术图片

 

 侧边的悬浮框会一直悬浮在最左边,实现导航的悬浮。

通过js代码实现:

技术图片

 

 js代码:

var n_t1 = $(‘body‘).height() * 0.12;
            if(scrTop < n_t1){
              $(‘.content2_left‘).css("position","absolute")
              $(‘.content2_left‘).css("left","0px")
              $(‘.content2_left‘).css("top","0px")
            }else{
                $(‘.content2_left‘).show()
                // $(‘.content2_left‘).css("background-color","red")
                $(‘.content2_left‘).css("position","fixed")
                $(‘.content2_left‘).css("left","10%")
                $(‘.content2_left‘).css("top","5%")

            }

  

 

 

 

 

实现侧边导航栏的悬浮设置

标签:pre   position   bsp   http   pos   nbsp   java   滚动   png   

原文地址:https://www.cnblogs.com/Ky-Thompson23/p/11895653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!