jq 导航跟随 模拟京东手机端
想做一个导航跟随,但是代码都要下载,自己简单些了一个,css都放html里面了,所以也不用下载直接新建html,然后粘贴,点开就是导航跟随效果
效果如图
<!DOCTYPE html>
<html>
<head>
<title>导航跟随</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<style>
#nav {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
line-height: 30px;
font-size: 14px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
min-height: 44px;
background: #000;
} #nav a {
display: block;
position: relative;
width: 25%;
line-height: 44px;
text-align: center; color: #fff;
} #nav a.active {
color: #fff;
background: red;
} #main {
padding-top: 44px;
}
</style>
<script>
$(window).load(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
var nav = $("#nav");
var mainPage = $(".mainPage");
var mainTopArr = new Array();
for (var i = 0; i < mainPage.length; i++) {
var top = mainPage.eq(i).offset().top;
mainTopArr.push(top);
}
$(window).scroll(function () {
var scrollTop = $(this).scrollTop(); var k;
for (var i = 0; i < mainTopArr.length; i++) {
if (scrollTop + 144 >= mainTopArr[i]) {
k = i;
}
}
nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
});
nav.find("a[href^='#']").click(function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $(this.hash).offset().top - 144 }, 200);
});
});
</script>
<body>
<div id="nav">
<a href="#imgdetails" class="active">商品</a>
<a href="#specifications">规格</a>
<a href="#reviews">评价</a>
<a href="#description">详情</a>
</div>
<div id="main">
<div class="mainPage" id="imgdetails"style="height:500px">我是第一块的内容</div>
<div class="mainPage" id="specifications" style="height:500px">我是第二块的内容</div>
<div class="mainPage" id="reviews" style="height:500px">我是所有评论啦,来看评论</div>
<div class="mainPage" id="description" style="height:500px">我是介绍,来看介绍</div>
</body>
</html>
本来是想用document.ready,但是应用到实际中有页面包含了很多绝对定位的元素,定位并不准确。
jq 导航跟随 模拟京东手机端的更多相关文章
- jq判断是PC还是手机端的方法
$(function(){ //判断是否是手机 var mobile_flag = isMobile(); if(mobile_flag){ $('.now_qq').attr('href',&quo ...
- 手机端调用app导航
因为是在微信端中操作,所以只能使用腾讯地图才能调起手机的腾讯地图app <!doctype html> <html> <head> <meta charset ...
- 第九十二节,html5+css3移动手机端流体布局,开篇知识
html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致 一.整体设计 首先 我们要了解一 ...
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 涨姿势!手机端的META你知道多少?
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 手机端的META你有多了解?
我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...
- 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...
随机推荐
- Jennifer Chayes: 生活始终在你手中
Jennifer Chayes 听到Mark Kac.Freeman J. Dyson.林家翘,或者是David I. Gottlie.BerndSturmfels和Sir John Ball等 ...
- SQL JOIN 和 UNION 用法
1 SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons, Orders WHERE Persons.Id_P ...
- 用hugo建博客的记录 · 老张不服老
前后累计折腾近6个小时,总算把搭建hugo静态博客的整个过程搞清楚了.为什么用了这么久?主要还是想偷懒,不喜欢读英文说明.那就用中文记录一下过程吧.还是中文顺眼啊. 某日发现自己有展示些东西给外网的需 ...
- C轮魔咒:智能硬件为什么融资难
据相关媒体不完全统计,2015年完成融资的智能硬件公司集中在A轮和B轮,但能挺进C轮的少之又少.对智能硬件创业的年终盘点也显示,此前比较热门的手环.智能家居等主要单品在去年明显出现了回落.陷入C轮魔咒 ...
- 这个黑科技iPhone8会用吗?人体传送密码解开锁屏
随着现代化信息技术的发展,人们对信息安全也是愈发关注,数据安全始终是个热点和难点.通过WIFI或者蓝牙进行密码传输确实非常方便,但是它已经不再具备安全保障.因此为了解决信息安全的问题,华盛顿大学的 ...
- 9——PHP循环结构foreach用法
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- Web渗透基础小总结
Web渗透框架概述 主要组成: 1. web语言代码(脚本) 2. web程序 3. 数据库程序 Web语言常见几大类 1. HTML:超文本标记语言,标准通用编辑语言下的一个应用 2. PHP:超文 ...
- crypto-js aes加密解密
安装 npm install crypto-js --save unit.js import CryptoJS from "crypto-js"; //秘钥 const CRYPT ...
- Postgresql存放数组形式的数据
Postgres 数据库允许把字段定义为可变长度的数组.数据类型既可以是内置类型,也可以是用户自定义的类型或枚举类型. 例如: 创建表 create table demo(name text,subj ...
- JZOJ 5235. 【NOIP2017模拟8.7A组】好的排列
5235. [NOIP2017模拟8.7A组]好的排列 (File IO): input:permutation.in output:permutation.out Time Limits: 1000 ...