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

如果滚动的军力大于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. intelliJ idea提示api注释

  2. r与java整合(转)

    http://jliblog.com/archives/10 R是统计计算的强大工具,而JAVA是做应用系统的主流语言,两者天然具有整合的需要.关于整合,一方面,R中可以创建JAVA对象调用JAVA方 ...

  3. Node.js mzitu图片批量下载爬虫1.00

    又攻下一座山头. //====================================================== // mzitu图片批量下载爬虫1.00 // 2017年11月19 ...

  4. Android,TextView的所有属性和方法

    XML 属性 属性名称 相关方法 描述 android:autoLink setAutoLinkMask(int) 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接. ...

  5. 从客户端的角度来谈谈移动端IM的消息可靠性和送达机制

    1.前言 IM App 是我做过 App 类型里复杂度最高的一类,里面可供深究探讨的技术难点非常之多.这篇文章和大家聊下从移动端客户端的角度所关注的IM消息可靠性和送达机制(因为我个人对移动客户端的经 ...

  6. js知识梳理1:理解对象的属性特性

    1.数据属性 数据属性的4个特性: Configurable:①表示能否通过delete删除属性从而重新定义,②能否修改属性的特性,③能否把属性修改为访问器属性.对象直接量里默认值true. Enum ...

  7. Navicat Premium如何打开SQL文件.MDF和.LDF文件

    相信大家再装SQL Server时都会遇到一件很头疼的事情--装完SQL server之后发现没有启动程序.没有经验的会以为SQL SERVER安装失败了于是选择重装.可是呵呵,重装了4,5次还是一样 ...

  8. 【Linux】压缩与解压

    一: 下面这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个: tar-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件 下面的参数是根据需要在 ...

  9. JavaScript-深入理解JavaScript(一、预编译和执行过程)

    一.预解析 JavaScript 在执行前会进行类似“预解析”的操作:首先会创建一个在当前执行环境下的活动对象, 并将那些用 var 声明的变量.定义的函数设置为活动对象的属性, 但是此时这些变量的赋 ...

  10. angularJS使用内置服务

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...