时间:2022-11-17 浏览量: 收藏
关于侧边栏跟随固定浮动效果网上一搜一大把,可真正能实现的没有几个。再加上需要手动修改代码,而教程写的都不那么完整详细,大家操作过程中就会遇到这样那样的问题。如:边栏遮挡底部footer、边栏会顶着页脚footer无限滚下去等等,这让对代码。
今天就为大家奉上具体实现方法,不会代码的小白都会操作哦。
为什么要使用边栏跟随效果?
目前很多网站都在使用边栏跟随效果,也就是随着滚动条的滚动边栏跟着滑动或者固定的效果。这样一来可以弥补当一个页面很长,而侧边栏太短的时候的产生空白,并且还可以合理利用空间展示更多信息,从而大大的提高网站浏览量、文章点击率。这样子的效果很适合于文章的列表与广告联盟的展示。
如何实现智能侧边栏跟随固定浮动的效果?
这里我推荐给大家一款jquery滚动固定侧边栏插件theia-sticky-sidebar.js,该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面,并能和bootstrap或Foundation配合使用。
插件的兼容性
本段代码兼容目前最新的各类主流浏览器,适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器,首选火狐浏览器。是一款不错的的特效插件,需要的朋友可以下载!
如何实现智能侧边栏跟随固定范围浮动的效果?
HTML代码:
<html> <head></head> <body> <div class="wrapper"> <div class="content"> ... </div> <div class="sidebar"> ... </div> </div> </body> </html>
其中,sidebar是想要智能滑动的元素;引入JS
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="theia-sticky-sidebar.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.sidebar').theiaStickySidebar({ // Settings additionalMarginTop: 30 }); }); </script>
其中,第一个 js,若重复请自行删减!第二个 theia-sticky-sidebar.js,可以去这里下载(链接: //pan.baidu.com/s/1nmCkF9s0CiWTCTjrmVokew 提取码: j1bb);第三个 js 中的.sidebar跟上面的对应,就是想要智能滑动的元素对应的选择器,class 或 id。
可用配置参数及说明:
containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。
additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。
updateSidebarHeight:是否更新侧边栏的高度。默认为true。
minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)
defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。
namespace:绑定事件的命名空间。默认为TSS。
以上就是jquery插件theia-sticky-sidebar.js实现的智能侧边栏跟随固定浮动的效果,至此已经实现了部署。
下载地址:
链接: //pan.baidu.com/s/1aWwoSgLgFWxidNsQanjL5g 提取码: 5j3x
效果演示:
//demo.jb51.net/js/2017/theia-sticky-sidebar/
RELATED RECOMMEND
2022-11-17
企业网站导航设计是网站中一个很重要的因素,一个合理的导航设计不但利于搜索引擎优化,还对提升用户体验至关重要,迅速了解自己所处的位置,这对提高用户的转化率十分有用。在网站建设中做好各类导航设计对网站后期的优化推广十分有利。 下面QY千亿国际就来看看在网站设计制作中,做好导航设计的相关几点。 1、辅助导航。 为用户提供一个直观的展示,让用户知道自己所在的网站位置,这样可以让每一级的位置名称的有链接可会,每一个网页都必须包含辅助导航以及左上角的网站的logo标识。 2、网站logo链接。 在网站设置中,在每一个出现网...
2022-11-17
企业如何选择网络公司建站的常见问题,QY千亿国际网络总结以下几点:1、企业会以自己建站的要求,比如需要哪些功能板块,界面的风格等直接来衡量各网络公司报的费用,很多具体细节的东西企业并不知道,这样一些网络公司可能就会以最简单的方式来做,这样省时、省力,因为很多
2022-11-17
厦门网站建设包括网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站建设的前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研,这个过程需要网站策划人员、美工设计人员、PHP程