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

如果滚动的军力大于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. 虚拟机快照,克隆,静态ip地址的设置(centos 6.5)

    一.快照 例如,当我们在虚拟机上做实验或是作测试时,难免碰到一些不熟悉的地方,此时做个快照,备份一下当前的系统状态,一旦操作错误,可以很快还原到出错前的状态,完成实验,最终避免一步的失误导致重新开始整 ...

  2. google,百度地图POI下载

    百度,google POI下载工具是可以对任意矩形范围,以及任意省市级区域的兴趣点数据进行下载,可以支持多线程下载,按分类下载,以及按关键字下载. 线程数可以自由设置16线程之内.下载格式为excel ...

  3. 算法笔记_105:蓝桥杯练习 算法提高 上帝造题五分钟(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 第一分钟,上帝说:要有题.于是就有了L,Y,M,C 第二分钟,LYC说:要有向量.于是就有了长度为n写满随机整数的向量 第三分钟,YUHC ...

  4. 关于华为x1 7.0无法从eclipse发布的更新as发布的apk

    目前只在华为x1 7.0手机上发现这个问题,坑大了. MediaPad 10 FHD 华为这款可以安装. HUAWEI G525-U00 华为这款也可以安装. 目前公司就这几款华为手机了. 原因是 在 ...

  5. git笔记之安装使用

    git是什么? 简介一下,Git是一个开源的分布式版本号控制系统,用以有效.快速的处理从非常小到非常大的项目版本号管理.Git是眼下世界上最先进的分布式版本号控制系统,没有传说中的之中的一个. Git ...

  6. 使用js+Ajax请求API接口数据-带请求头方式

    C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...

  7. 利用Redis撤销JSON Web Token产生的令牌

    利用Redis撤销JSON Web Token产生的令牌 作者:chszs.版权全部.未经允许,不得转载.博主主页:http://blog.csdn.net/chszs 早先的博文讨论了在Angula ...

  8. 安装python3.6后使用pip报错

    安装python3.6后,pip是一起安装好的,安装目录再C:\Programs\Python\Python36-32\Scripts中. 在python终端模式下使用pip出现错误如下: 错误原因: ...

  9. MBProgressHUD 设置透明背景

    MBProgressHUD 默认使用MBProgressHUDBackgroundStyleBlur 类型 MBProgressHUDBackgroundStyleBlur使用了毛玻璃效果 ,我们要把 ...

  10. rpm | yum 安装软件包时key过期

    1.问题: yum -y install docker-io Loaded plugins: fastestmirror, refresh-packagekit, security Setting u ...