所需文件 1)jQuery的 2)Angularjs
directories.js
angular.module('myApp').directive('setClassWhenAtTop', function ($window) {
var $win = angular.element($window); // wrap window object as jQuery object
return {
restrict: 'A',
link: function (scope, element, attrs) {
if(!$(element).attr('style'))
{
$(element).width($(element).outerWidth());
$(element).css('bottom',0);
}
var win_height = $(window).height();
var topClass = attrs.setClassWhenAtTop; // get element's top relative to the document
var offsetTop = $(element).offset().top
$win.on('scroll', function (e) {
var ele_height = $(element).height();
if(ele_height > win_height)
{
var scroll_top = $(window).scrollTop();
var shouldFix = (offsetTop+ele_height)-(scroll_top+win_height);
console.log(shouldFix);
console.log(scroll_top +">="+offsetTop);
if(shouldFix < 0 && scroll_top >= offsetTop)
{
element.addClass(topClass);
}
else
{
element.removeClass(topClass);
}
}
else
{
if (scroll_top >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
}
});
}
};
});
如何使用文件..
只要把目錄rightside /萊夫特賽德酒吧裏像下面。
set-class-when-at-top="p-f" where p-f{position:fixed;}
這意味着代碼看起來像什麼
<div class="left">
</div>
<div class="right">
<div class="width-100" set-class-when-at-top="p-f" >
sdfsfdfs
</div>
</div>
隨意問我任何問題。 謝謝, Ronak Amlani。
分享您的研究爲他人.. – Prasad