1. 程式人生 > >實現某元素上滑至頂端時固定懸浮

實現某元素上滑至頂端時固定懸浮

.afix{
position:fixed;
top:45px;
z-index:100;
}
.fix{
position:fixed;
top:0px;
z-index:100;
}

.parent {

background: white;
width: 100%;
border-bottom: 1px solid #FFF;
}

window.onscroll= function(){
//變數t是滾動條滾動時,距離頂部的距離
var current =document.documentElement.scrollTop;
var obj = $('.parent')[0];
var hig =$('#source_container').height();
var isAndroid = u.indexOf('Android') > -1|| u.indexOf('Linux') > -1;
var css ='fix';
if(isAndroid){
css = 'afix';
}
if(hig-current<50){
var obj = $('.parent')[0];
$(obj).addClass(css);// ('position','fixed');
}else{
if($(obj).hasClass(css))
{
$(obj).removeClass(css);
}
}

}

 

 

<div class="div_body topcss">
<div class="xuanfu">
<div id="source_container">
</div>
<div class="parent">
<div class="sui"><i class="fa fa-user-circle-o" aria-hidden="true"></i><input class="weui-btn_primary weui-input " type="button" value="我也來說兩句" id="comment"></div>
</div>
</div>
<div class="container">
@*<div class="comentcss"><a href="#" id="more">檢視更多</a></div>//這個功能去掉*@
</div>
</div>