利用锚点改变事件\(onhashchange\)，使用jQuery的\(scrollTop\)向前滚回导航栏的高度（比如我的100个像素）

HTML:

<body onhashchange="fix_the_nav();">

</body>

js:

function fix_the_nav() {

    if(window.location.hash){

            var target = $(location.hash);

            $("body,html").scrollTop(target.offset().top-100); // my nav size is 100px

    }

}

Done.

我的Gist

完美解决Bootstrap4 导航栏 fixed-top 后，锚点定位时遮挡问题的更多相关文章

  1. Bootstrap4 导航栏

    Bootstrap4 导航栏 目录 Bootstrap4 导航栏 动态选项卡 标准的导航栏 导航对齐方式 导航栏的组成 ul 元素中包含navbar-nav 类 表示导航栏中ul li元素中包含nav ...

  2. (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

    完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...

  3. 完美解决VS2003.Net fatal error LNK1201: 写入程序数据库“.pdb”时出错

    我的开发环境是Win7旗舰64位+VS2003.Net,经常卡pdb错误,文末给出一个完美的解决方案和一个懒人补丁包.问题描述如下:在重新编译的时候,经常报错: fatal error LNK1201 ...

  4. iOS解决隐藏导航栏后，打开照片选择器后导航栏不显示的问题以及更换导航栏背景色

    问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...

  5. iOS正确解决隐藏导航栏后push和pop或dismiss和present闪黑问题

    情景: 一级页面不显示导航栏 ,二级页面显示导航栏. 方法一 适用于push/pop: 一级页面中 - (void)viewWillAppear:(BOOL)animated { [super vie ...

  6. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

  7. ios --xib自定义，解决在导航栏不透明的情况下，自定义xib view高度被压缩64的问题

    在使用xib自定义view的时候,个人习惯性的直接使用xib中的约束,所以自然而然的要打开Autolayout.以前在使用的时候没有发现什么问题,最近项目中使用的时候突然发现在导航栏透明的情况下,出现 ...

  8. 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式

    具体的样式有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 在CODE上查看代码片派生到我的代 ...

  9. 多级联动导航栏（top导航）

    http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ This is a multi-lev ...

随机推荐

  1. Laravel 5 项目部署到生产环境的实践

    作者:mrcn链接:https://www.zhihu.com/question/35537084/answer/181734431来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  2. [IIS] 测试的产品登陆之后有个引用外部站点js的请求半天都无法返回，导致网页一直在打转，Selenium的driver也无法对页面进行下一步的操作

    测试的产品登陆之后有个引用外部站点js的请求半天都无法返回: https://cdn.heapanalytics.com/js/heap-3497400264.js 这个js如果是在美国的机器上就可以 ...

  3. background image

    http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html http://blog.d ...

  4. php redis 单例模式

    单例模式思想其实很简单 首先 有一个实例的静态变量 构造方法和克隆方法设置为私有,防止外部直接new 提供一个获取实例的静态方法 代码如下: class Redis { private static ...

  5. checkbox数据回显问题

    一.问题 在用复选框的时候,最常用的无非就是全选,全不选,数据回显等问题!要做的比较灵活!最近做项目的时候,就遇到这些问题,下面从js和JQueyr两方面解决一下全选,全不选,数据回显的问题. 二.H ...

  6. swipe.js 使用方法

    1.插件要求的css样式: <style> .swipe { overflow: hidden; visibility: hidden; position: relative; } .sw ...

  7. Give $20/month and provide 480 hours of free education

    Hi , Hope all is well. Summer is right around the corner, and the Khan Academy team is excited to sp ...

  8. SQL -- What Tables Queries are Used to Display the Counts in the Inventory Account Periods form (INVTTGPM.fmb) (Doc ID ID 357997.1)

    Applies to: Oracle Inventory Management - Version 11.5.9 to 12.1.3 [Release 11.5 to 12.1] Informatio ...

  9. centos7怎能开机设置文本界面

    rm -f /etc/systemd/system/default.target 设置命令行级别方法:ln -sf /lib/systemd/system/runlevel3.target /etc/ ...

  10. jenkins启动失败，提示Starting Jenkins Jenkins requires Java8 or later, but you are running 1.7.0

    # 背景 centos安装jenkins后,先启动jenkins服务,结果报错如下: 但自己明明已经安装了java8的 # 解决方法 既然安装了java8的话,那么证明是jenkins启动的是还是用的 ...