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

如果滚动的军力大于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. mac 下安装 plink

    1.  直接 brew install putty. 其自带 plink工具.

  2. [Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin

    As you refactor and modify applications, it's difficult to manage and keep track of files as they be ...

  3. 苹果推送服务器端证书配置.pem生成

    做苹果推送服务器,很重要的一步,就是生成与苹果APNS连接的证书,一般是.pem文件: 首先在苹果开发者中心 生成 aps_devlopment.cer文件:然后下载:双击导入钥匙串: 打开钥匙串 - ...

  4. linux下Oracle11g RAC搭建(二)

    linux下Oracle11g RAC搭建(二) 一.安装前配置 网络的配置 IP占用測试 进入windows下.运行cmd,使用ping命令验证网段是否被占用. 注:用哪个网段都行,一定保证不要被其 ...

  5. 【java】对数据库操作的那些事(包含数据库中的预处理)

    一.连接问题 前面刚介绍了怎么连接数据库,也写了对应的模板.可是它的可维护性很差.那么怎么解决问题呢? 首先写一个配置文件jdbc.properties <span style="fo ...

  6. java数据库操作:JDBC的操作

    1,JDBC注意操作类及接口: 数据库操作过程: 1)打开数据库服务 2)连接数据库:一般都要输入用户名,密码, 3)操作数据库:创建表:查询表,更新,记录. 4)关闭数据库. 1,DriverMan ...

  7. Drupal的钩子系统

    Drupal的很多功能都是可以定制的.以导航菜单为例,blog模块需要在菜单上添加一些功能,comment模块需要在菜单上添加一些功能,我们开发的自定义模块也需要在菜单上添加一些功能.Drupal开发 ...

  8. Solr4.0使用

    http://blog.sina.com.cn/s/blog_64dab14801013k7g.html Solr简介 Solr是一个非常流行的,高性能的开源企业级搜索引擎平台,属于Apache Lu ...

  9. Android studio 使用心得(六)—android studio 如何加载.so文件

    之前一直没怎么注意,以为.so文件android为像eclipse一样直接加载,但是直到昨天我在android studio上调试公司项目推送消息的时候,才发现,.so文件原来没有加载成功. 可能之前 ...

  10. chrome 浏览器设置字体大小,方便调试

    H5开发的时候,有时候明明字体没有那么大,但在chrome中看上去依然很大.就像型号不对一样,但在手机端是正常的. 这是因为chrome浏览器设置了默认字体.只需要设置一下即可.  「chrome:/ ...