【JQuery Mobile+JS实现智能浮动定位导航条】的更多相关文章

JQuery Mobile+JS实现智能浮动定位导航条

实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTop大于浮动层离窗口顶部的距离时,就让浮动层的position属性设为fixed定位,脱离文档流2,浏览器向上滚动时,当document的scrollTop小于浮动层离窗口顶部的距离时,就让浮动层的position属性设为static定位,回归文档流 代码实现 先看看html和css代码,很简单 <!…

Javascript:浮动的导航条

代码主体及说明 Javascript部分: /** * @函数名:flexScroll * @功能:滚动超出一定高度,指定元素悬浮 * @两个参数:target_id:目标元素id;topEle:限定滚动高度,超过之后,导航条悬浮 * @调用方式:e.g.:flexScroll('nav',80); * @author:Kevin 2015/8/14 */ function flexScroll(target_id,topEle){ window.onscroll=function(){ var…

JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img…

jquery.smint.js 页面菜单浮动之谷歌浏览器异常

jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在js判断中多加了一个条件 stickyTop <=80 完美解决了…

js页面滚动时层智能浮动定位实现

直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function () { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (win…

使用 jQuery 实现当前页面高亮显示的通栏导航条

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src=&quo…

jquery实现可以中英切换的导航条

html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/j…

jquery控制滚动条改变上面固定(fixed)导航条或者搜索框的属性

<script type="text/javascript"> $(document).ready(function(){ $(window).scroll( function(data){ var s = $(window).scrollTop(); ){ $(".c-hd-index").css('background-color','#fc8600'); }else{ $(".c-hd-index").css('backgrou…

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jquery Mobile提供了一套标准的工具和导航栏的工具,可以在绝大多数情况下直接使用:头部一般做网站或应用的标题,功能导航等,一般都是些文字或者按钮:尾部是一个页面的最下端,内容可以根据具体应用需要来排版,也可以放功能导航.各种链接等:内容中使用一般是作为功能的展示,显示内容同时附带着功能:jque…

【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化

关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致的核心和语法,还使用了jQuery UI的代码和模式. 兼容绝大部分手机平台 轻量级的库 模块化构建 HTML5标记驱动的配置 渐进增强原则 响应设计 强大的Ajax导航系统 易用性 支持触摸和鼠标事件 统一的UI组件 强大的主题化框架 基本应用 默认情况下,移动浏览器,会像在大屏幕的Web浏览器那…