摘要:很久前寫的代碼,種模式,現在發出來與大家分享,其實這塊的思路還有需要些優化,望大家來優化探討左右側滾動左右兩邊高度不確定,獲取左右兩邊高度,左側高于右側,則右側浮動,否則,左側滾動左側滾動明確右邊高于左側,則左側浮
很久前寫的代碼,3種模式,現在發出來與大家分享,其實這塊的思路還有需要些優化,望大家來優化探討
// 左右側滾動 (左右兩邊DIV高度不確定,獲取左右兩邊DIV高度,左側高于右側,則右側浮動,否則,左側滾動) function HomeScroll(a,b){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var c=$(a),d=$(b);if(c.length>0&&d.length>0){function g(){var g=$(window).scrollLeft(),h=$(window).scrollTop(),i=$(document).height(),j=$(window).height(),k=c.height(),l=d.height(),e=d.offset().top,f=c.offset().top,m=k>l?f:e,n=k>l?d:c,o=k>l?c.offset().left+c.outerWidth(!0)-g:d.offset().left-c.outerWidth(!0)-g,p=k>l?l:k,q=k>l?k:l,r=parseInt(q-j)-parseInt(p-j);$(a+","+b).removeAttr("style"),j>i||p>q||m>h||p-j+m>=h?n.removeAttr("style"):j>p&&h-m>=r||p>j&&h-m>=q-j?n.attr("style","margin-top:"+r+"px;"):n.attr("style","_margin-top:"+(h-m)+"px;position:fixed;left:"+o+"px;"+(j>p?"top":"bottom")+":0;")}$(window).resize(g).scroll(g).trigger("resize")}} // 左側滾動 (明確右邊DIV高于左側,則左側浮動) function HomeScrollL(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=c.offset().top,l=c.offset().left-e.outerWidth(!0)-m,i=parseInt(j-h)-parseInt(g-h);if(kj||ng&&(n-b)>=i||h =(j-h)){e.attr("style","margin-top:"+i+"px;")}else{e.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>g?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}}; // 右側滾動 (明確左側DIV高于右側,則右側浮動) function HomeScrollR(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=e.offset().top,l=e.offset().left+e.outerWidth(!0)-m,i=parseInt(g-h)-parseInt(j-h);if(k g||nj&&(n-b)>=i||h =(g-h)){c.attr("style","margin-top:"+i+"px;")}else{c.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>j?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}};
左右側滾動調用:HomeScroll(“Mid_L”,"Mid_R")
左側滾動調用:HomeScrollL(“Mid_L”,"Mid_R")
右側滾動調用:HomeScrollR(“Mid_L”,"Mid_R")
js中做了特殊情況處理,比如ipad平板,浮動會有問題,直接就不浮動了,里面有為了更好的兼容IE6等,使用了margin-top方式,如果不考慮IE9以下瀏覽器,這代碼還可以精簡,寫起來更簡單明了
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101262.html
摘要:本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標頁腳沉底和粘性側邊欄。因為我們想在全站都擁有這個按鈕,所以將剛寫好的模塊引用到中在后面引入注意模塊用到了,因此要在后面引入。 本章集中介紹四個重要的小功能:回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄。 這幾個功能與Django基本沒啥關系,更多的是前端知識,但是對博客網站都很重要,問的讀者也比較多,因此也集中講一下好了。 回到頂...
摘要:盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。 視覺格式化模型 Visual Formatting Model URL:http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯,譯者在原文基礎上...
摘要:本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外滑稽。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的...
摘要:深入布局定位與浮動在知識體系中,除了選擇器,樣式屬性等基礎知識外,布局相關的知識才是比較核心和重要的點。定位后,原來在文檔流中占據的位置,會被其他元素所占據。清除浮動的特殊應用清除浮動可以解決父元素高度塌陷問題。? 深入css布局(2) — 定位與浮動 ? ???? 在css知識體系中,除了css選擇器,樣式屬性等基礎知識外,css布局相關的知識才是css比較核心和重要的點。今天我們來深...
閱讀 1369·2021-10-13 09:39
閱讀 1333·2021-09-23 11:22
閱讀 2243·2019-08-30 14:05
閱讀 1059·2019-08-29 17:03
閱讀 771·2019-08-29 16:24
閱讀 2227·2019-08-29 13:51
閱讀 656·2019-08-29 13:00
閱讀 1290·2019-08-29 11:24