导航条悬浮效果

简介: 当浏览器滚动条向下滚动,自动悬浮导航栏在最上面。效果:1、 css代码 .ui-jqgrid-htable{ z-index: 999; }2、 jquery代码$(function(){ var offset_pin = $(".

当浏览器滚动条向下滚动,自动悬浮导航栏在最上面。

效果:

img_ac492ed5138da0953c1eeee3e6342d4d.gif

1、 css代码

    .ui-jqgrid-htable{
        z-index: 999;
    }

2、 jquery代码


$(function(){

       var offset_pin = $(".ui-jqgrid-htable").offset();//pin的偏移

        $(window).scroll(function(){//滚动页面 
            
        var scroH = $(this).scrollTop(); //浏览器偏移
            
    if(scroH > offset_pin.top){
            $(".ui-jqgrid-htable").css({ top: "0", position: "fixed"});
    }else{
            $(".ui-jqgrid-htable").css({ top: "", position: ""});
    }

});

3、 html代码

<div class="ui-jqgrid-htable">
 导航
</div>

@落雨
http://ae6623.cn

目录
相关文章
|
2天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
13 0
|
5月前
|
前端开发
HTML+CSS实现导航条
HTML+CSS实现导航条
|
JavaScript 前端开发
菜单栏底部线条切换效果(标题滚动居中显示)
菜单栏底部线条切换效果(标题滚动居中显示)
112 0
菜单栏底部线条切换效果(标题滚动居中显示)
|
前端开发
卡片布局以及鼠标悬浮展示全部
卡片布局以及鼠标悬浮展示全部
109 0
卡片布局以及鼠标悬浮展示全部
|
Java Android开发
两个按钮的滑块
牙叔教程 简单易懂
128 0
|
算法 JavaScript
weebox弹出窗口不居中显示?
weebox弹出窗口不居中显示?
89 0
侧边自定义滚动条
在线演示 本地下载
935 0
半透明菜单导航
在线演示 本地下载
786 0
移动端弹出遮罩层时防止底部页面滚动
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
1432 0
一个立体感的按钮样式
原文:一个立体感的按钮样式 ...
820 0