网页代码：

<!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 固定导航的更多相关文章

  1. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  2. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  3. 一款基于jquery固定于顶部的导航

    今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览   源码下载 实现的代 ...

  4. 固定导航栏（jquery）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  6. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  7. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  8. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  9. Bootstrap系列 -- 43. 固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...

随机推荐

  1. GTK+2.0学习——第一个GTK程序

    #include <gtk/gtk.h> #include <stdio.h> #include <stdlib.h> /* *点击了关闭按钮之后的回调函数 *gt ...

  2. Long类型比较大小，long型和Long型区别

    今天写代码发现发现本地程序是正常的,但是发送到测试环境就不正常了,本着对数据的怀疑态度链接了测试数据库,调试程序发现,确实是数据问题,然后数据出现在什么地方呢?才发现是在判断用户所属的teamGrou ...

  3. 【Java】ArrayList 的 toArray() 方法抛出 ClassCastException 异常

    第一次用这个方法,结果冒出个莫名其妙的异常来: String[] names = (String[]) mTags.toArray(); 结果会抛出 java.lang.ClassCastExcept ...

  4. 2016 ACM/ICPC Asia Regional Qingdao Online 1005 Balanced Game

    Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  5. 【NOIP2011提高组】选择客栈

    题目不附了,是一个单纯的ST模型,但是考验各种常数优化. 最大的优化是对于同颜色的客栈来说,如果1号和2号成功配对了,那么1和3,1和4都可以成功配对,那么只要找到一对成功配对的,我们就直接加上剩下的 ...

  6. vue对比其他框架

    对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保 ...

  7. iosAPP打包上架xcode中Archive提交成功以后，不提示构建版本问题

    最近在项目更新时遇到Archive提交到开发者中心成功后,一直不提示构建版本信息,可能导致的原因是由于ios10以后对于APP中调用手机相册或摄像头麦克风时需要配置plist文件,配置如下内容或许会解 ...

  8. hibernate------->第一个程序

    今天学习hibernate . 创建User类: package com.hibernate; import java.util.Date; public class User { private I ...

  9. ural 1100. Final Standings（数据结构）

    1100. Final Standings Time limit: 1.0 secondMemory limit: 16 MB Old contest software uses bubble sor ...

  10. Javascript Date 判断输入日期是否正确

    JavaScript的Date对象有容错性,可将随意给定的日期的年月日自动生成正确的日期时间 //JavaScript中Date对象容错性 function dateCheck(){ var date ...