Ⅰ 網頁設計如何設置網頁部分內容不隨著滾動條而移動移動
div的樣式中使用相當於瀏覽器窗口定位——position:fixed。
一、position:fixed屬性的含義
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
我們平時所說的固定定位指的就是fixed，設置了固定定位的元素不會隨滾動條上下滾動。
二、一般的 position:fixed; 實現方法
#top{position:fixed;bottom:0;right:20px}
實現了id為top的元素固定在瀏覽器的底部和距離右邊20個像素的位置
#top{position:fixed;top:20px;right:20px}
實現了id為top的元素固定在距離瀏覽器的頂部20個像素和距離右邊20個像素的位置
三、IE6下position:fixed; 實現方法
在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 來解決它
相同的還是讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素，這次的代碼是：#top{
position:fixed;
bottom:0;
right:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
right 跟 left 屬性可以用絕對定位的辦法解決，而 top 跟 bottom 就需要用上面的表達式來實現。其中在_position:absolute; 中的 _ 符號只有 IE6 才能識別，目的是為了區分其他瀏覽器
1、使元素固定在瀏覽器窗口的頂部：
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
2、使元素固定距瀏覽器窗口的頂部a像素的位置：
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}或者
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}
3、使元素固定在瀏覽器窗口的底部：
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
4、使元素固定在距瀏覽器窗口的底部b像素的位置：
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}或者
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}
四、IE6下的閃動問題
問題還沒有完全解決。在用了上面的辦法後，你會發現：被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在 CSS 文件中加入：
*html{background-image:url(about:blank);background-attachment:fixed;}
其中 * html選擇器hack是給 IE6 識別的。
到此，IE6 的 position:fixed; 問題已經被解決了
Ⅱ js中事件穿透深度剖析與多種解決方案
最近項目開發過程中，在ios環境下。雙擊（doubletap）上層元素（固定定位fix），偶爾會觸發下層（瀑布流中）路由跳轉。
經過部門老大指導，才了解到這個現象叫做「事件穿透」。再此俺決定研究下為什麼？
電腦上一般是滑鼠操作，即響應的是滑鼠事件，包括mousedown、mouseup、mousemove和click事件。
在一次點擊行為中，事件的觸發過程為：mousedown -> mouseup -> click 三步。
由於手機上沒有滑鼠，所以就用觸摸事件去實現類似的功能。touch事件包含touchstart、touchmove、touchend
注意手機上並沒有tap事件。 一些庫例如hamer.js、zepto.js 等等都是通過處理這些原生事件，來定義不同的手勢以及tap事件。
在一次點擊行為中，事件的觸發過程為：touchstart -> touchmove -> touchend。
有人在PC和手機上對事件做了對比實驗，以說明手機對touch事件相應速度快於mouse事件。touchstart --> mouseover(有的瀏覽器沒有實現) --> mousemove(一次) -->mousedown --> mouseup --> click -->touchend。
瀏覽器在 touchend 之後會等待約 300ms ，如果沒有 tap 行為，則觸發 click 事件。 而瀏覽器等待約 300ms 的原因是，判斷用戶是否是雙擊（double tap）行為，雙擊過程中就不適合觸發 click 事件了。 由此可以看出 click 事件觸發代表一輪觸摸事件的結束。
ps：此處偷一張圖
跟局官網描述我們可以看出：觸發路由跳轉的事件默認為 click
移動端chromiun 和 iOS 9.3＋ 可以用 CSS 屬性來阻止元素的雙擊縮放進而取消點擊穿透的延遲：
首先引入庫：
調用：
將層的固定定位「降」下來，和下面的router-link都在瀑布流內。
註：此方法只適合部分項目。
由於 click 事件的滯後性，在這段時間內原來點擊的元素消失了，於是便「穿透」了。因此我們順著這個思路就想到，可以給元素的消失做一個fade效果，類似jQuery里的fadeOut，並設置動畫ration大於300ms，這樣當延遲的 click 觸發時，就不會「穿透」到下方的元素了。
同樣的道理，不用延時動畫，我們還可以動態地在觸摸位置生成一個透明的元素，這樣當上層元素消失而延遲的click來到時，它點擊到的是那個透明的元素，也不會「穿透」到底下。在一定的timeout後再將生成的透明元素移除。