网页代码：

<!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. jquery新版本不支持toggle()的解决方法

    toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 在1.9以后官方废除了这个方法: 解决如下 在需要调用的js文件下引用 $.fn.toggle = ...

  2. 走迷宫 （nyoj 306）

    学习自此博客题解 二分搜索+深搜.二分枚举最小差距值(路径上的最大值与最小值的差距),枚举的最小值为abs(a[1][1]-a[n][n]),最大值为题目给出的120.搜索时代入这个最小差距值,若存在 ...

  3. nginx 配置访问限制

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  4. HDU 1724 Ellipse 自适应simpson积分

    simpson公式是用于积分求解的比较简单的方法(有模板都简单…… 下面是simpson公式(很明显 这个公式的证明我并不会…… (盗图…… 因为一段函数基本不可能很规则 所以我们要用自适应积分的方法 ...

  5. [转]Python跳过第一行读取文件内容

    from itertools import islice file_name='XXXX' input_file = open(file_name) for line in islice(input_ ...

  6. jenkins jmeter持续集成批处理jmx脚本

    这篇文章介绍jenkis jmeter的持续集成,利用jenkins定时任务去批处理执行jmeter的jmx脚本文件,并且生成测试报告 1:jmeter的安装这里我就不在赘述了,如有问题可参考我的jm ...

  7. sim808模块收发送短信

    一,简介 SIM 808发送短信分text模式和PDU模式.text模式已ascii码发送短信,这种模式比较简单,发送命令AT+CMGF=1就可以发送短信,而PDU模式比较复杂,首先发送命令AT+CM ...

  8. ansible Strategies

    Strategies 控制task的执行方式, 在2.0中增加了"free" Strategies, 可以允许每个host尽快的执行完一个play. 默认是Strategies是l ...

  9. 在windows下安装pip scrapy...

    将 C:\Users\用户名\AppData\Local\Programs\Python\Python35\Scripts C:\Users\用户名\AppData\Local\Programs\Py ...

  10. ecshop 后台添加新的设置

    1.ecs_shop_config 表添加新的值. 2.language/zh_cn/admin/shop_config.php 设置字段后台字段名和提示信息($_LANG['cfg_name'][' ...