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

如果滚动的军力大于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. scala类型系统 type关键字

    和c里的type有点像. scala里的类型,除了在定义class,trait,object时会产生类型,还可以通过type关键字来声明类型. type相当于声明一个类型别名: scala> t ...

  2. mac 下安装 plink

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

  3. Maven Dependencies 不见了

    解决办法: 1. 选中项目 --> 右键 --> Maven --> Disable Maven Nature 此时,右键菜单中将隐藏[Maven]菜单选项 2. 选中项目 --&g ...

  4. Java经典算法汇总之冒泡排序

    冒泡排序基本思想:在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即:每当两相邻的数比较后发现它们的排序与排序要求相反时 ...

  5. 算法笔记_163:算法提高 最大乘积(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 对于n个数,从中取出m个数,如何取使得这m个数的乘积最大呢? 输入格式 第一行一个数表示数据组数 每组输入数据共2行: 第1行给出总共的数 ...

  6. 关于JSP乱码问题

    关于jsp乱码问题的解决. 1 最基本的乱码问题. 这个乱码问题是最简单的乱码问题.一般新会出现.就是页面编码不一致导致的乱码. <%@ page language="java&quo ...

  7. JDBC数据库编程：PreparedStatement接口

    使用PreparedStatement进行数据库的更新及查询操作. PreparedStatement PreparedStatement是statement子接口.属于预处理. 使用statemen ...

  8. c#导出到excel的几种解决方案

    (一)传统操作Excel遇到的问题: 1.如果是.NET[使用office组件Microsoft.Iffice.interop.Excel的话],需要在服务器端装Office,且及时更新它,以防漏洞, ...

  9. Linux 文件系统类型 文件系统结构 与Windows文件系统的比较

    摘自:http://blog.csdn.net/gelivable007/article/details/7249365 Linux 文件系统类型 磁盘文件系统.包括硬盘.CD-ROM.DVD.USB ...

  10. js根据对象的某一属性进行排序

    function compare(property) { return function (a, b) { var value1 = new Date(a[property]); var value2 ...