我有一个针对粘性侧边栏的指令,页面顶部的一切正常,我的问题是在页脚上,我需要做一些动态捕捉屏幕高度或屏幕分辨率的东西
这是我的指示
.directive('sticky', function($document, $timeout) {
return {
restrict: 'A',
link: function(scope, element) {
var width = $document.width();
if (width > 991) {
$timeout(function() {
angular.element($document).ready(function() {
var stickySidebar = element,
stickyHeight,
sidebarTop,
scrollTop,
stickyStop,
sidebarBottom,
stopPosition;
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
sidebarTop = stickySidebar.offset().top;
}
$document.scroll(function() {
if (stickySidebar.length > 0) {
scrollTop = $document.scrollTop() + 52; //stkicy responds to the navbar
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop);
sidebarBottom = stickySidebar.offset().top + stickyHeight;
stickyStop = $('.main-content').offset().top + $('.main-content').height();
if (stickyStop < sidebarBottom) {
stopPosition = $('.main-content').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
}
else {
stickySidebar.css('top', '0');
}
}
});
$document.resize(function() {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
});
}, 1000);
}else {
console.log('do not apply function because the size is not the proper one');
}
}
};
});
在这里查看图像,这是正确的行为,但在一个非常大的分辨率屏幕中,你可以看到下面的红色标签是我想给每个分辨率屏幕的边距
这是13“笔记本电脑中的那个
你可以看到没有边距所以左边的Sticky元素如果与屏幕的高度相同则不起作用,我想在每个分辨率上给出与第一张图像相同的边距,如何我可以用我的指令吗?