CSS3 POSITION:STICKY 固定導航平滑過渡
阿新 • • 發佈:2018-11-02
position:sticky是一個新的css3屬性,它的表現類似position:relative和position:fixed的合體。
在可視區域內,表現是 relative屬性
超過區域外,固定在螢幕上,表現是 fixed屬性
一般方法是用js控制 position為 relative 和 fixed切換,但手機上滑動會有些滯後,卡頓,而 sticky屬效能平滑過渡。
判斷sticky程式碼:
function supportSticky(str){ var t, n = str, e = document.createElement("i"); e.style.position = n; t = e.style.position; e = null; return t === n; }
對不支援sticky的處理:
$(window).bind('scroll', function () { var isSticky = supportSticky('sticky') || supportSticky('-webkit-sticky'); if(!isSticky){ if ($(this).scrollTop() < top_nav) { $el.removeClass('fixed'); } else { $el.addClass('fixed'); } } });
css寫法:
.scrollMenu{
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 36px;
z-index: 1000;
}