js 固定懸浮效果實現(xiàn)思路代碼
更新時間：2013年08月02日 17:54:51 作者：
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實現(xiàn)思路及代碼，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<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(); //當(dāng)前高度
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) { //如果小于這個高度，則恢復(fù)原來狀態(tài)
flag = true;
$('#div_right').css('position','');
}
});
*/
})(jQuery);
</script>
您可能感興趣的文章:
相關(guān)文章
基于JavaScript實現(xiàn)在線網(wǎng)頁煙花效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)簡單的在線網(wǎng)頁煙花效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
Javascript中Microtask和Macrotask鮮為人知的知識點(diǎn)
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識點(diǎn)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)alert彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JS幻燈片可循環(huán)播放可平滑旋轉(zhuǎn)帶滾動導(dǎo)航(自寫)
本文為大家介紹下實現(xiàn)JS幻燈片可循環(huán)播放帶滾動導(dǎo)航可平滑旋轉(zhuǎn)的全過程，效果還不錯，由需要的朋友可以參考下，希望對大家有所幫助2013-08-08
GoJs中導(dǎo)出圖片或者SVG實現(xiàn)示例詳解
這篇文章主要為大家介紹了GoJs中導(dǎo)出圖片或者SVG實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了javascript正則表達(dá)式，由淺入深的幫助大家學(xué)習(xí)正則表達(dá)式，感興趣的小伙伴們可以參考一下2016-03-03
詳解微信小程序開發(fā)聊天室—實時聊天，支持圖片預(yù)覽
這篇文章主要介紹了微信小程序?qū)崟r聊天支持圖片預(yù)覽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了Javascript中常用類型的格式化方法，其中包括格式化浮點(diǎn)數(shù)、格式化有符號整數(shù)(int32)、格式化無符號整數(shù)(uint32)、格式化布爾值以及格式化字符串等，文中給出了詳細(xì)的示例代碼，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
關(guān)于寫倒計時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計時這樣寫沒有問題，但是如果是長時間的倒計時，這樣寫就會不準(zhǔn)確2019-10-10
javascript實現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法,可實現(xiàn)顯示一些按鈕如果點(diǎn)擊了,按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼]點(diǎn)”的效果,非常具有實用價值,需要的朋友可以參考下2015-05-05