粘滯滾動容器在IE中不工作

由於某些原因，這適用於所有主流瀏覽器，但不適用於IE（驚喜，驚喜）。粘滯滾動容器在IE中不工作

$(function() { 
var stickyDiv = $('#js-sticky-wrap'); // div to clone 
var clonedCss = 'js-sticky-fix'; // css class with fixed positioning 
stickyContainer(stickyDiv, clonedCss); 

function stickyContainer(stickyDiv, clonedCss, clonedWidth) { 
    if (clonedWidth === undefined) { // use original container width 
     var clonedWidth = $(stickyDiv).width(); 
    } 

    var menuTop = stickyDiv.offset().top; // Capture visible content height 
    var menuClone = stickyDiv.clone(true).addClass(clonedCss); // Clone current div, apply fixed style 
    var dropShadow = $('<div class="js-drop-shadow"></div>').hide(); 
    // Append dropshadow style 
    stickyDiv.append(dropShadow); 

    $(window).bind('scroll', function() { 
     var scrollY = window.pageYOffset; // get total px from vertical scroll 
     if (scrollY > menuTop) { // they scrolled > than the original offset 
      if (menuClone.parent().length === 0) { 
       stickyDiv.addClass(clonedCss).width(clonedWidth); 
       menuClone.after(stickyDiv.parent()); 
       dropShadow.show(); 
      } 
     } else { 
      stickyDiv.removeClass(clonedCss); 

      dropShadow.hide(); 
      menuClone.remove(); 
     } 

    }); 
}

}）;

Example on jsfiddle

有，只是不與我使用IE瀏覽器所支持的方法？似乎無法把它放下，因爲我沒有在開發人員工具中遇到任何錯誤。

來源

2011-12-30 bob_cobb

@lostinplace在結果框中向下滾動。 – 2011-12-30 02:08:10

window.pageYOffset不使用IE瀏覽器像這樣的支持，直到版本9嘗試：

var scrollY; 
if (typeof(window.pageYOffset) == 'number') { 
    scrollY = window.pageYOffset; 
} 
else { 
    scrollY = document.documentElement.scrollTop; 
}

來源

2011-12-30 02:11:16 epignosisx

這也不行，替換 menuClone.after（stickyDiv.parent（））; 與 menuClone.appendTo（stickyDiv.parent（））; – lostinplace 2011-12-30 02:22:38

我編輯了答案，但它正在等待同行評議 – lostinplace 2011-12-30 02:25:55

好吧，這當然有助於解決使其變得粘滯的問題，但是當然，IE並沒有讓我輕鬆，並引入了一個不同的問題。儘管如此，感謝你和@lostinplace。 – 2011-12-30 02:34:46

粘滯滾動容器在IE中不工作

回答

相關問題