jquery 固定导航
网页代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定标签</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.img {
float: left;
height: 158px;
}
.left_group_list {
margin-top: 80px;
}
.row_out {
float:left;
width:760px;
height:300px;
border:1px solid #428bca;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-4">
<div class="list-group left_group_list">
<a href="javascript:void(0)" class="list-group-item active">左侧导航</a>
<a href="#" class="list-group-item">首页</a>
<a href="#" class="list-group-item">导航1</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
<a href="#" class="list-group-item">导航2</a>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="row_out">
<a href="#" class="list-group-item sh">哈啊哈哈</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail img">
<img src="../../user/adverPhoto/zstu.jpg" />
</a>
</div>
</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/jquery.pin.js"></script>
<script type="text/javascript">
$(".left_group_list").pin();
//钉住他
$(".left_group_list").pin({
minWidth: 940
});
//在小屏幕上禁用钉住
$(".sh").pin({
containerSelector: ".row_out"
})
</script>
</body>
</html>
重点：其实最重要的就是红色部分。这里分别是外侧，内部，和当屏幕变小的时候。
效果图：
正如我们看到的：左侧导航不随右侧滚动，而且，容器内部的内容不随容器外部滚动。
如果需要下载地址在我云盘里，拿去。https://yunpan.cn/ckpCDpqPaIjjs 访问密码 0724(项目源码下载)
jquery 固定导航的更多相关文章
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- 一款基于jquery固定于顶部的导航
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览 源码下载 实现的代 ...
- 固定导航栏（jquery）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- Bootstrap系列 -- 43. 固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定 ...
随机推荐
- LaTeXの学习笔记
听说LaTeX挺有趣,决定学习一下提升自己的境(逼)界(格),借鉴了许多大神的经验与笔记,希望能坚持下去......(*￣;(￣ *) 1.论文写作的三种格式 eg. \documentclass{a ...
- empty，is_null，isset返回值的比较
empty,is_null,isset返回值的比较: 变量 empty is_null isset$a="& ...
- CentOS 7安装Teamviewer 12
1 下载teamviewer 12的rpm包 方法一:访问官网 https://www.teamviewer.com/en/download/linux/ 方法二:wget https://downl ...
- 记JavaScript的入门学习（二）
2016年11月25号,利用上午时间学习了JavaScript的数据类型和变量,下午就该去图书馆泡书了. 看完变量的本章节,发现我可能不能一天结束,那我就利用上午和晚上九点回来的时间完成吧.把心态调整 ...
- Java 内部类 this
内部类访问外部类的一个例子: public class Abc { private class Bc { public void print() { System.out.println(Abc.th ...
- Openjudge-NOI题库-和数
题目描述 Description 给定一个正整数序列,判断其中有多少个数,等于数列中其他两个数的和. 比如,对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + ...
- struts2查询的数据的存放
当我们查询数据的时候,把它存放到一个位置.以供页面显示. 1:使用***Map取代内置对象存放 public String query(){ ActionContext.getContext().pu ...
- 如何在 Linux 中找出最近或今天被修改的文件
1. 使用 ls 命令,只列出你的 home 文件夹中今天的文件. ls -al --time-style=+%D | grep `date +%D` 其中: -a- 列出所有文件,包括隐藏文件 -l ...
- HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...
- incredibuild agent service is not running
incredibuild 不用介绍了,今天因为服务没有启动报错显示为: incredibuild agent service is not running 解决方法为: 在Incredibuild的安 ...