滚动条超过一定距离, 导航栏悬浮在最上方

window.onload = function(){
    var tabTop = $("#tab_demo .tabBar").offset().top;
    $(".Hui-article").scroll(function(){
        var currentTop = $(this).scrollTop()+94;
        console.log(currentTop+":"+tabTop);
        if(currentTop >= tabTop){
            var topVal = currentTop - tabTop;
            $("#tab_demo .tabBar").css({
                "position":"relative",
                "top":topVal+"px",
                "left":"0",
                "z-index":"11111",
                "width":"100%",
                "background":"#fff"
            });
        }else{
            $("#tab_demo .tabBar").css({
                "position":"static"
            });
        }
    });
}

  

实现滚动条超过一定距离, 导航栏悬浮在最上方的功能。

时间: 2024-10-26 10:29:45

滚动条超过一定距离, 导航栏悬浮在最上方的相关文章

根据浏览器的滑动条 固定导航栏

固定导航栏 前言:很多网站都有这种网页的效果:滑动浏览器右侧的滚动条,导航栏会一直处于最上方 下面我就来简单实现以下这个功能 一.首先我们来写一下html的结构: 1 <div class="top" id="top"></div> 2 <div class="nav" id="nav"></div> 3 <div class="main" id=&qu

导航栏置顶固定悬浮

<!doctype html><html><head><meta charset="utf-8"><title>网友分享jQuery导航菜单悬浮置顶特效</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,

垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部

如标题,这个功能,有很大的实用性,通过样式以及JS,还是比较容易实现的. 不多说了,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>菜单导航可悬浮在顶部</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script typ

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域.如下图所示: 这是需要达到的目标效果.其中Header和SideNav部分之间用固定定位实现就可以了,但是MainContent部分右侧的scroll bar确实不太好处理,主要存在两个问题: - 按照普通的方式基本都会铺满右侧整个可视区域,这使得顶部的Header的右侧有了一个滚动条区域,这对于顶部固定这个效果反差太明显. - 第二个问题是,如果Main

jQuery粘性跟随滚动条滚动的导航栏源代码下载

jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条滚动的导航栏源代码下载,不兼容IE6.点击导航栏不同的按钮,滑动到不同的内容.滚动条滚动,导航栏会自始至终保持在浏览器可是区域的最顶端. 使用方法 第一步.在head区域引入下面的css样式: 01 <link href="http://fonts.googleapis.com/css?fam

CSS实现导航栏底部动态滚动条效果

预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: <style> ul.nav{background-color: whitesmoke;} ul.nav li{padding: 10px 0;margin: 0 30px;overflow: hidden;} ul.nav li a{text

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

首先看效果图: 最开始鼠标没有滚动的时候: 当鼠标滚动下拉到一定高度的时候: 侧边的悬浮框会一直悬浮在最左边,实现导航的悬浮. 通过js代码实现: js代码: var n_t1 = $('body').height() * 0.12; if(scrTop < n_t1){ $('.content2_left').css("position","absolute") $('.content2_left').css("left","0

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

一次性解决导航栏的所有问题

系统默认导航栏的返回按钮和返回方式 在默认情况下,导航栏返回按钮长这个样子 导航栏默认返回按钮 导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个ViewController没有标题,则为Back(中文环境下为"返回"). 在默认情况下,导航栏返回的点击交互和滑动交互如下 默认导航栏交互 这些东西不需要任何设置和操作,因此也没有其他需要说明的地方. 自定义左上角的返回按钮 绝大多数情况下,我们都需要根据产品需求自定义左上角的返回按钮,虽然这对大多数