搜索到
2
篇与
的结果
-
导航栏下拉至一定高度后固定在顶部的特效 js要引入jquery文件：<script type="text/javascript"> $(function(){ var nav=$("#header"), //得到导航对象 win=$(window), //得到窗口对象 doc=$(document);//得到document文档对象。 //防止页面滚动到60px以下F5刷新后导航不显示 if(doc.scrollTop()>=60){ $('#header').addClass('fixnav'); }else{ $('#header').removeClass('fixnav'); } //滚动到60px以下导航显示 win.scroll(function(){ if(doc.scrollTop()>=60){//判断滚动的高度 $("#header").addClass('fixnav');//固定导航样式类名 }else{ $("#header").removeClass('fixnav'); } }) }) </script>然后在css文件里面增加这个属性（其他一些样式自行添加）：.fixnav { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; } -
jQuery 侧边栏固定 theia-sticky-sidebar.js 现在很多网站都使用了两栏或者多栏的设计，theia-sticky-sidebar.js是一款jquery滚动固定侧边栏插件。该jquery滚动固定侧边栏插件在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面，并能和bootstrap或Foundation配合使用。使用方法在页面中引入jquery、ResizeSensor.min.js和theia-sticky-sidebar.min.js文件。<script src="path/js/jquery.min.js" type="text/javascript"></script> <script src="path/js/ResizeSensor.min.js" type="text/javascript"></script> <script src="path/js/theia-sticky-sidebar.min.js" type="text/javascript"></script>Theia Sticky Sidebar滚动固定侧边栏插件使用CSS Element Queries这个库来检测侧边栏高度的变化，以此来重新计算侧边栏的位置。ResizeSensor.js正是用来完成这个任务的。你也可以不引入ResizeSensor.min.js文件，Theia Sticky Sidebar滚动固定侧边栏插件仍然会正常工作，但是不会自动检测侧边栏的高度。 HTML结构页面的HTML结构应该类似下面的样子：<div class="wrapper"> <div class="content"> <div class="theiaStickySidebar"> ... </div> </div> <div class="sidebar"> <div class="theiaStickySidebar"> ... </div> </div> </div>内部的div.theiaStickySidebar是可选的，但是建议这样组织HTML结构。如果你不是这样组织的，插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe，那么你最好安装上面的HTML结构来组织HTML代码。 配置参数Theia Sticky Sidebar滚动固定侧边栏插件的可用配置参数有：containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。updateSidebarHeight：是否更新侧边栏的高度。默认为true。minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。namespace：绑定事件的命名空间。默认为TSS。Theia Sticky Sidebar滚动固定侧边栏jquery插件的github地址为：https://github.com/WeCodePixels/theia-sticky-sidebar
