如何修复侧边栏滚动？

我使用这个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

如何修复侧边栏滚动？

回答

相关问题