js 固定懸浮效果實現(xiàn)思路代碼
更新時間:2013年08月02日 17:54:51 作者:
懸浮效果想必大家都不陌生吧,本文為大家介紹下使用js固定懸浮的實現(xiàn)思路及代碼,感興趣的朋友可以參考下
復制代碼 代碼如下:
<script type="text/javascript">
(function($){
var ele_fix = $("#div_right"); //浮動窗口
var _main = $(".main"); //浮動區(qū)域
var ele_offset_top = ele_fix.offset().top; //浮動區(qū)域高度
$(window).scroll(function(){
var scro_top = $(this).scrollTop(); //當前高度
var fix_foot_pos = parseInt(ele_fix.height())+parseInt(scro_top)-10; //浮動框最底部到最頂部高度
var mainpos = parseInt(_main.offset().top)+parseInt(_main.height());
if(scro_top <= ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "static", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "fixed", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos>mainpos){
var posi = mainpos-fix_foot_pos-10;
ele_fix.css({position: "fixed", top: posi});
}
});
/*
//方案二
$(window).bind("scroll",function() {
var temp = '1165';
//判斷往下滾
if ($(document).scrollTop() > temp) { //如果大于這個高度,就置頂
flag = false;
$('#div_right').css({'position':'fixed', 'top':'-10px', 'margin-top':'0px'});
}
if ($(document).scrollTop() <= temp) { //如果小于這個高度,則恢復原來狀態(tài)
flag = true;
$('#div_right').css('position','');
}
});
*/
})(jQuery);
</script>
相關文章
Javascript中Microtask和Macrotask鮮為人知的知識點
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識點講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪2022-04-04
JS幻燈片可循環(huán)播放可平滑旋轉帶滾動導航(自寫)
本文為大家介紹下實現(xiàn)JS幻燈片可循環(huán)播放帶滾動導航可平滑旋轉的全過程,效果還不錯,由需要的朋友可以參考下,希望對大家有所幫助2013-08-08
javascript實現(xiàn)點擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實現(xiàn)點擊后變換按鈕顯示文字的方法,可實現(xiàn)顯示一些按鈕如果點擊了,按鈕文本變?yōu)椤包c了”,其他按鈕文本變?yōu)椤皼]點”的效果,非常具有實用價值,需要的朋友可以參考下2015-05-05

