亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

jQuery寫(xiě)的文章內(nèi)容頁(yè)右側(cè)浮動(dòng)滾動(dòng)

MorePainMoreGain / 3158人閱讀

摘要：很久前寫(xiě)的代碼，種模式，現(xiàn)在發(fā)出來(lái)與大家分享，其實(shí)這塊的思路還有需要些優(yōu)化，望大家來(lái)優(yōu)化探討左右側(cè)滾動(dòng)左右兩邊高度不確定，獲取左右兩邊高度，左側(cè)高于右側(cè)，則右側(cè)浮動(dòng)，否則，左側(cè)滾動(dòng)左側(cè)滾動(dòng)明確右邊高于左側(cè)，則左側(cè)浮

很久前寫(xiě)的代碼，3種模式，現(xiàn)在發(fā)出來(lái)與大家分享，其實(shí)這塊的思路還有需要些優(yōu)化，望大家來(lái)優(yōu)化探討

// 左右側(cè)滾動(dòng) （左右兩邊DIV高度不確定，獲取左右兩邊DIV高度，左側(cè)高于右側(cè)，則右側(cè)浮動(dòng)，否則，左側(cè)滾動(dòng)）
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")}}

// 左側(cè)滾動(dòng) （明確右邊DIV高于左側(cè)，則左側(cè)浮動(dòng)）
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")}};

// 右側(cè)滾動(dòng) （明確左側(cè)DIV高于右側(cè)，則右側(cè)浮動(dòng)）
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(kg||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")}};

左右側(cè)滾動(dòng)調(diào)用：HomeScroll(“Mid_L”,"Mid_R")
左側(cè)滾動(dòng)調(diào)用：HomeScrollL(“Mid_L”,"Mid_R")
右側(cè)滾動(dòng)調(diào)用：HomeScrollR(“Mid_L”,"Mid_R")
js中做了特殊情況處理，比如ipad平板，浮動(dòng)會(huì)有問(wèn)題，直接就不浮動(dòng)了，里面有為了更好的兼容IE6等，使用了margin-top方式，如果不考慮IE9以下瀏覽器，這代碼還可以精簡(jiǎn)，寫(xiě)起來(lái)更簡(jiǎn)單明了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101262.html

相關(guān)文章

  • Django搭建個(gè)人博客：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄

    摘要：本章集中介紹四個(gè)重要的小功能回到頂部浮動(dòng)按鈕矢量圖標(biāo)頁(yè)腳沉底和粘性側(cè)邊欄。因?yàn)槲覀兿朐谌径紦碛羞@個(gè)按鈕，所以將剛寫(xiě)好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。 本章集中介紹四個(gè)重要的小功能：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄。 這幾個(gè)功能與Django基本沒(méi)啥關(guān)系，更多的是前端知識(shí)，但是對(duì)博客網(wǎng)站都很重要，問(wèn)的讀者也比較多，因此也集中講一下好了。 回到頂...

    lovXin 評(píng)論0 收藏0

  • CSS規(guī)范 > 9 視覺(jué)格式化模型 Visual Formatting Model

    摘要：盒的類(lèi)型會(huì)影響其在視覺(jué)格式化模型中的表現(xiàn)。浮動(dòng)元素絕對(duì)定位元素根元素都被稱(chēng)為脫離文檔流其他元素被稱(chēng)為文檔流內(nèi)。 視覺(jué)格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎(chǔ)上...

    魏憲會(huì) 評(píng)論0 收藏0

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（二）

    摘要：本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過(guò)的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺(jué)得很多時(shí)候開(kāi)發(fā)的經(jīng)驗(yàn)都是踩坑踩出來(lái)的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的...

    laznrbfe 評(píng)論0 收藏0

  • 深入css布局 (2) — 定位與浮動(dòng)

    摘要：深入布局定位與浮動(dòng)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。定位后，原來(lái)在文檔流中占據(jù)的位置，會(huì)被其他元素所占據(jù)。清除浮動(dòng)的特殊應(yīng)用清除浮動(dòng)可以解決父元素高度塌陷問(wèn)題。? 深入css布局(2) — 定位與浮動(dòng) ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深...

    Crazy_Coder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<