如何修復側邊欄滾動？

我使用這個JavaScript函數來使右側欄固定：如何修復側邊欄滾動？

<script type="text/javascript"> 
$(document).ready(function() { 
    var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsidebar-wrapper').css('marginTop').replace(/auto/, 0)); 
    $(window).scroll(function (event) { 
     // what the y position of the scroll is 
     var y = $(this).scrollTop(); 
     // whether that's below the form 
     if (y >= top) { 
      // if so, ad the fixed class 
      $('#rightsidebar-wrapper').addClass('fixed'); 
     } else { 
      // otherwise remove it 
      $('#rightsidebar-wrapper').removeClass('fixed'); 
     } 
    }); 
}); 
</script>

而這個CSS樣式的rightsidebar格：

#rightsidebar-wrapper { 
    background: #ffffff; 
    width: 225px; 
    float: right; 
    margin-top: 8px 0px 0 0; 
    padding:0px; 
    word-wrap: break-word; 
    overflow: hidden; 
} 

#rightsidebar-wrapper.fixed { 
    position: fixed; 
    top: 5px;

}

這是一個側邊欄放在右邊。 問題是當側邊欄頂部在滾動時遇到屏幕的頂端時，它會漂浮到左側。在此增加的CSS

right: 10%;

它解決了這個問題，但是當頁面放大或縮小的再次失去其位置。任何想法如何解決這個問題？

來源

2012-02-15 Amit Yadav

設置top:值是你能解決這個問題嗎？我將元素設置爲絕對值，並使用JS計算來使其工作。我遇到的問題是IE在您滾動時抖動。 Chrome和Firefox很流暢。我也必須讓我的敏感，所以設置一個權利或保證金權利將無濟於事。我的解決方案的小提琴在這裏：http://jsfiddle.net/yq3rcp0j/7/ – seroth 2015-03-06 15:10:51

這是因爲職位：固定與浮動排泄。很可能你必須通過JavaScript來設置位置。您可以使用$（window）.resize（）來修復放大/縮小問題。

來源

2012-02-15 15:38:50 Thash

我知道這篇文章太老了，但我希望有人在未來尋找這個答案沒有Bootstrap可能會發現它有用。它也適用於響應式網站。

首先，創建一個具有以下CSS屬性的div。

#scroll_to{ 
    padding: 25px; 
    display: inline-block; 
    float: right; 
    background-color: #eeeeee; 
}

它會在窗口的右側創建一個浮動框。

然後將這個JS代碼應用到你的div，它會工作。

注：請根據您的標題欄

var div_pos= $('#scroll_to').position().top; 
$(document).on('scroll', function() { 
    var scroll_top= $(this).scrollTop(); 
    if(scroll_top>=div_pos){ 
     console.log("fix"); 
     $('#scroll_to').css({ 
      'position': 'fixed', 
      'right': '0', 
      'top': '36px' 
     }); 

    }else{ 
     $('#scroll_to').css({ 
      'position': '', 
      'right': '', 
      'top': '36px' 
     }); 
    } 
});

來源

2017-09-09 08:02:35

如何修復側邊欄滾動？

回答

相關問題