利用css来实现position fixed

Question

如何通过position fixed来实现这种页面效果：在最开始的时候我建的一个组件是固定在页面的某个位置，不是顶部，当滑动条滚动的时候，这个组件会滑到页面的顶部。这种效果改如何实现呢？假如用position fixed，一开始没有固定在顶部，滑动的时候不就会显得很怪异吗？诸位有没有什么好的解决办法呢？或者其他方法也行，在此先谢过了

Answer 1

这得用js来检测元素与顶部的距离，一旦达到距离为0，用js来设置元素的css中的position fixed

Answer 2

用js做了，css不能完成这个效果

Answer 3

$(window).scroll(function(){
window.scrollTo(数字,数字);
})

Answer 4

sass可以，或者是加个JS

Answer 5

加一个类，当滚动的时候就把类加到这个组件中。。

Answer 6

$(window).scroll(function(event) {

            var num_1=$(window).scrollTop();
            var num_2=$(window).height();
            if(num_1>num_2){
                $('.arr').show();
            }else{
                $('.arr').hide();
            }

        });

类似于这样写 你直接把show改为修改目标的css就行了

Answer 7

感谢大家的热心解答，问题已经解决了

Answer 8

一般这效果都是用js吧。
以前看到css3有带这功能 position：sticky