吸顶下过代码跟简单几行代码就可以了

如果滚动的军力大于100，就改变导航的定位方式，否则就默认

$(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $(".nav").css({"position":"fixed","top":0,"background":"red","width":"100%"});
            }else{
                $(".nav").css({"position":"static"});
            }
        });
    });

JQ实现吸顶效果代码的更多相关文章

  1. 使用swiper和吸顶效果代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  3. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  4. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  5. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  6. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  7. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  8. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  9. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  2. 云计算之路-阿里云上：启用Windows虚拟内存引发的CPU 100%故障

    今天上午11:35~11:40左右,由于负载均衡中的两台云服务器CPU占用突然飚至100%,造成网站5分钟左右不能正常访问,请大家带来了麻烦,请谅解! (上图中红色曲线表示CPU占用) 经过分析,我们 ...

  3. actor中!（tell）与forward的差别

    ! 的源代码: def !(message: Any)(implicit sender: ActorRef = Actor.noSender): Unit tell 的源代码: final def t ...

  4. ios 程序发布使用xcode工具Application Loader 正在通过ITUNES STORE进行鉴定错误

    ios 程序发布使用xcode工具Application Loader 正在通过ITUNES STORE进行鉴定错误 一:此错误会导致上传程序,一直停留在验证阶段,而没有一点上传进度:结果会苦等半天, ...

  5. linux修改密码出现Authentication token manipulation error的解决办法

    转自 :http://blog.163.com/junwu_lb/blog/static/1916798920120103647199/ Authentication token manipulati ...

  6. 关于Future.cancel(mayInterruptIfRunning)方法的参数的问题

    mayInterruptIfRunning设成false话,不允许在线程运行时中断,设成true的话就允许. 可以参考下面的代码来理解,如果设为false的话,会打印到99999,如果设成true的话 ...

  7. 解析Linux特殊文件【转】

    您有Dos和Windows经验,就大概知道系统存在若干类型的文件,如系统文件.只读文件.隐含文件等.在Linux下用ls –l 命令来判断文件类型,可以依据第一列中的10个字符来判断.-rw-r—r— ...

  8. C语言-数据结构(一)

    1.动态创建多维数组 int ** createArray(int rows, int cols) { int **x, i; x = (int **)malloc(rows * sizeof(*x) ...

  9. jetty maven插件端口设置

    在jetty的maven插件中有两种方式设置jetty的端口(默认为:8080). 第一种,通过命令行,在启动jetty的时候设置:mvn -Djetty.port=8081 jetty:run 第二 ...

  10. phpexcel表的一些设置

    $objPHPExcel = new PHPExcel(); $objPHPExcel->setActiveSheetIndex(0); //set default styles$objPHPE ...