[問題]如何在ng實現置頂功能

qq076 · 2017年09月18日16:42

有一個區塊
在卷軸高度200以內是正常顯示
但是在超過200之後要是固定在視窗上面（fixed效果）
用jquery可以用scrollTop判斷卷軸高度
那請問在ng專案中如果不使用jquery要怎麼實現才是比較好的做法呢？

Will_Huang · 2017年09月18日17:58

你還是可以使用 jQuery 喔，請參考我日前的線上直播錄影

Kevin · 2017年09月18日23:25

如果不想用jquery又不知道該怎麼寫，就去看jquery是怎麼寫的

jquery/jquery/blob/a6a28d24c183d4252bd269d89b3ddc5f4ae88863/src/offset.js#L179-L208


jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
	var top = "pageYOffset" === prop;


	jQuery.fn[ method ] = function( val ) {
		return access( this, function( elem, method, val ) {


			// Coalesce documents and windows
			var win;
			if ( isWindow( elem ) ) {
				win = elem;
			} else if ( elem.nodeType === 9 ) {
				win = elem.defaultView;
			}


			if ( val === undefined ) {
				return win ? win[ prop ] : elem[ method ];
			}


			if ( win ) {
				win.scrollTo(

This file has been truncated. show original

qq076 · 2017年09月19日00:46

因為聽說ng的畫面呈現是依靠判斷資料的狀態
而不是直接操作DOM
所以才會糾結於不要使用JQUERY
但是不直接操作DOM又不知道怎麼解決
所以才會想問這個問題

7Hd · 2017年09月19日02:34

剛剛找到 ng2-sticky 應該也可以參考看看

github.com

makseo/ng2-sticky/blob/master/src/lib/src/component/sticky.component.ts#L92-L109


stuckElement(): void {
    this.isStuck = true;


    this.elem.classList.remove(this.endStickClass);
    this.elem.classList.add(this.stickClass);


    Object.assign(this.elem.style, {
        zIndex: this.zIndex,
        position: 'fixed',
        top: this.offsetTop + 'px',
        right: 'auto',
        bottom: 'auto',
        left: this.getBoundingClientRectValue(this.elem, 'left') + 'px',
        width: this.width
    });


    this.activated.next(this.elem);
}

leochen0818 · 2017年09月19日09:23

可以用 hostListener 監聽 window on scroll 事件

請參考：
http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/

qq076 · 2017年09月19日10:23

謝謝解答
這正式我想要找的解決方法
也感謝其他人的建議!