导航条悬浮效果

简介: 当浏览器滚动条向下滚动,自动悬浮导航栏在最上面。效果: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

目录
相关文章
|
17天前
|
JavaScript 前端开发 容器
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动
|
5月前
|
前端开发
HTML+CSS实现导航条
HTML+CSS实现导航条
|
JavaScript 前端开发
菜单栏底部线条切换效果(标题滚动居中显示)
菜单栏底部线条切换效果(标题滚动居中显示)
109 0
菜单栏底部线条切换效果(标题滚动居中显示)
|
前端开发
卡片布局以及鼠标悬浮展示全部
卡片布局以及鼠标悬浮展示全部
108 0
卡片布局以及鼠标悬浮展示全部
|
Java Android开发
两个按钮的滑块
牙叔教程 简单易懂
124 0
侧边自定义滚动条
在线演示 本地下载
931 0
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
971 0
移动端弹出遮罩层时防止底部页面滚动
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
1430 0
一个立体感的按钮样式
原文:一个立体感的按钮样式 ...
817 0
|
Android开发
动画必须有(二):悬浮菜单了解一下!
动画必须有(一): 属性动画浅谈githhub传送门 目录 前言 效果图 FloatingActionButton基础 FloatingActionButton实例 最后 前言 悬浮按钮是我非常喜欢的, 可以把最关键的功能放入到悬浮按钮中.
1033 0