位置固定 - 水平滾動

我有一個左側垂直側欄，當用戶垂直滾動時，側欄與用戶垂直滾動。但是，如果窗口太小，用戶會水平滾動，則垂直側欄會隨着窗口一起滑動。如何停止側欄水平滾動，而且還允許側欄垂直滾動。位置固定 - 水平滾動

而我不想這樣做。

overflow: hidden;

因爲我想用戶有水平滾動的能力，但我只是不希望邊欄與他們一起來。

這是我的javascript：

$(document).ready(function(){ 
    var top = $("#sidebar").offset().top; 
    $(window).scroll(function(){ 
     var y = $(window).scrollTop(); 
     if (y >= top) { 
      $("#sidebar").addClass('fixed'); 
     } else { 
      $("#sidebar").removeClass('fixed'); 
     } 
    }); 
});

和我的CSS是：

#sidebar { 
    position: absolute; 
    height: 100%; 
    min-width: 100px; 
    width: 100px; 
    overflow: hidden; 
    background-color: #ededed; 
    border-right: 1px solid #aaa 
    } 
#sidebar.fixed { 
    position: fixed; 
    height:100%; 
    top: 0%; 
    z-index: 1; 
}

來源

2012-09-22 Elmer Almeida

顯示您的JavaScript和CSS是沒有意義的，如果我們不能看到HTML。 – Sparky

「不是真正的問題」是人們在結束問題時經常使用的一個誤導詞。 – Jawad

然後固定也許是錯誤的appoach。

理論上你可以使用.scroll功能來更新元素的絕對頂部位置，如果頂部發生變化，但在左側屬性發生變化時忽略滾動事件。

請看這個小而簡單的例子。 http://jsfiddle.net/Hbkdt/

注意：您可以將此功能與動畫功能結合使用，並消除窗口事件，以便每30-50毫秒觸發一次，然後更新值。

動畫和去抖例如：http://jsfiddle.net/Hbkdt/1/

來源

2012-09-22 15:26:55 Luke

所以你沒看過最後一句話？ – Luke

我到底該怎麼做？：/ –

更新了答案... – Luke

位置固定 - 水平滾動

回答

相關問題