Sharepoint 2013 页面置顶（Topbar）小插件

Sharepoint 2013 页面置顶（Topbar）小插件

需求分析：主页面上加入Topbar功能，当页面向下滚动了，就出现Topbar图标，回滚到页面顶部。但是，需求的母版页中有底边栏，当滚动到底边栏时，TopBar要跟着底边栏一起移动，这样就有点难度了。效果如下图：

代码分析：

Topbar页面布局CSS：

.topbarFixed {display:inline-block;position:fixed;width:40px;height:40px;background-image:url("img/GoToTop_normal_icon.png");bottom:60px;left:50%;margin-left:-767px;z-index:9999;}.topbarAbsolute {display:inline-block;position:absolute;width:40px;height:40px;background-image:url("img/GoToTop_normal_icon.png");bottom:10px;left:-60px;margin-left:0px;z-index:9999;}.topbarAbsolute:hover, .topbarFixed:hover {background-image:url("img/GoToTop_mouseover_icon.png");
}
.topbarAbsolute:active, .topbarFixed:active {background-image:url("img/GoToTop_active_icon.png");
}

Topbar相关JS代码：

/*Code for adding topbar.Author: v-trdong@microsoft.comCreated Date: 2014/03/07
*//*Using js to create widget, add the widget to page.
*/(function ($) {$.fn.goTop = function () {return this.each(function (options) {var container = this;$(".sp-content").append("<a id='goto-top'></a>");$(".sp-content").css("position", "relative");//show or hide top bar$(container).scroll(function () {// explore heightvar w_height = $(container).height();// scroll heightvar scroll_top = $(container).scrollTop();if (scroll_top > 0) {if ($(".sp-footer").offset().top <= (w_height + 60)) {$("#goto-top").removeClass("topbarFixed");$("#goto-top").addClass("topbarAbsolute");}else {$("#goto-top").removeClass("topbarAbsolute");$("#goto-top").addClass("topbarFixed");}$("#goto-top").css("display", "inline-block");} else {$("#goto-top").removeClass("topbarFixed");$("#goto-top").removeClass("topbarAbsolute");$("#goto-top").css("display","none");}});//pin$("#goto-top").click(function (e) {e.preventDefault();$(container).animate({scrollTop: 0}, 200);});});};
})(jQuery);
$(function(){
$("#s4-workspace").goTop(); // $("#s4-workspace")是包含滚动条的外层div，sharepoint默认是$("#s4-workspace")
});

详细讲解：

1. 把TopBar设为一个<a></a>标签，通过添加CSS实现效果的切换

2. 核心部分是position的使用，包括：fixed和relative以及absolute之间的相互切换

逻辑：

1. $(".sp-content").append("<a id='goto-top'></a>")，为页面动态添加TopBar标签

2. 当页面没有出现底边栏时，TopBar的position是fixed，这样实现了TopBar始终在窗体左下角

3. 当出现底边栏时，TopBar的position切换为absolute，跟随内容页标签$(".sp-content")变化，这样保持了TopBar始终在底边栏上面。

操作步骤：

把上述CSS和JS代码加入Script Webpart就可以完成。

Sharepoint 2013 页面置顶（Topbar）小插件相关推荐

php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
奉献一个窗口置顶的小工具
请先看使用图片: 文件下载地址:Topmost.rar 使用方法是右击任务栏图标,然后选择相应的命令之后,点选要操作的窗口.就这样简单,OK. 右键菜单中还有一个顶层窗口的选项,默认是选中的. 如果去 ...
点击置顶按钮页面置顶到指定位置
列子: <div id="top"></div>  ...
[置顶] 常用小片段指令集锦
写道检测是否是整数还是这个好使啊 /** * 是否是整数 */ function isint($value) { $filter = preg_replace('/[^0-9]+/', '', ...
[置顶]mybatis分页插件实现分页...
1.了解过程:在数据库服务器中,sql语句实现分页便要每个查询语句都要写上limit(开始,结束),并且不能灵活的随前端变化,为此使用拦截器的方法,过程:拦截器拦截请求的sql语句(根据需要拦截的ID ...
[置顶]使用 maven 插件 maven-shade-plugin 对可执行 java 工程及其全部依赖 jar 进行打包...
作者:chenzhou123520 出处:http://chenzhou123520.iteye.com/blog/1706242 使用 maven 插件 maven-shade-plugin 对 j ...
SharePoint 2013 配置开发环境，需安装VS2012插件
SharePoint 2013已经安装好了,接下来就是配置开发环境,安装VS2012,但是,装好了以后,发现没有SharePoint 2013开发的支持,如下图: 然后,去网上查找资料,VS2012对 ...
SharePoint 2013 入门教程--系列文章
转:http://www.cnblogs.com/jianyus/p/3381415.html 以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这 ...
SharePoint 2013 入门教程
SharePoint 2013 入门教程以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个Sha ...