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)文章
Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下2022-11-11
Javascript中return與閉包對大家來說應(yīng)該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細(xì)的示例代碼，對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，感興趣的朋友們下面來一起看看吧。2017-01-01
JS onmousemove鼠標(biāo)移動坐標(biāo)接龍DIV效果實例
這篇文章主要介紹了JS onmousemove鼠標(biāo)移動坐標(biāo)接龍DIV效果實例，有需要的朋友可以參考一下2013-12-12
mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能示例
這篇文章主要介紹了mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JavaScript防抖與節(jié)流超詳細(xì)全面講解
在開發(fā)中我們經(jīng)常會遇到一些高頻操作，比如：鼠標(biāo)移動，滑動窗口，鍵盤輸入等等，節(jié)流和防抖就是對此類事件進(jìn)行優(yōu)化，降低觸發(fā)的頻率，以達(dá)到提高性能的目的。本文就教大家如何實現(xiàn)一個讓面試官拍大腿的防抖節(jié)流函數(shù)，需要的可以參考一下2022-10-10
這篇文章主要介紹了JavaScript監(jiān)聽一個DOM元素大小變化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了推薦4個原生javascript常用的函數(shù),需要的朋友可以參考下2015-01-01
Uni-app是一個基于Vue.js開發(fā)跨平臺應(yīng)用的框架,它可以將代碼編譯成多個平臺下的原生應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app瀑布流效果的相關(guān)資料,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了Webpack DLL 用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單點贊操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03