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