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.com
Created 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 height
var w_height = $(container).height();
// scroll height
var 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就可以完成。