Question

我正在使用Bootstrap的附加插件来实现粘性侧边栏。侧边栏按预期粘住，但我无法将div保持在带衬垫的容器内。应用词缀类时，侧栏将跳出容器外部并一直跳到浏览器窗口的右侧。

是否有一种简单的方法可以将侧边栏保持在正确的位置？

参见演示：

Answer 1

我遵循了anpsmn的建议，但做了以下更改：

$('#sidebar').on('affix.bs.affix', function(){ 
    var size = $(window).width(); //get browser width
    var divWidth = $(myContainer).width(); //get width of container
    var margin = (size - divWidth) / 2; //get difference and divide by 2
    $("#sidebar").css("right",margin);
})
.on('affix-top.bs.affix', function () {
  $("#sidebar").css("right","0px");
});

计算容器外部与浏览器大小相关的空间量。它需要一些调整，但它应该工作。

Answer 2

您可以使用Bootstrap events affix.bs.affix和affix-top.bs.affix来设置right的值。

我们可以添加.container的边距右和填充权限，并设置right

的#sidebar值

$('#sidebar')
  .on('affix.bs.affix', function () {
    var margin =  parseInt($('.container').css("margin-right"));
    var padding = parseInt($('.container').css("padding-right"));
    $("#sidebar").css("right",margin+padding);
  })
  .on('affix-top.bs.affix', function () {
    $("#sidebar").css("right","0px");
  });

Answer 3

稍作调整sl1983建议对我有用：

$('#sidebar').on('affix.bs.affix', function(){ 
    var size = $(window).width(); //get browser width
    var divWidth = $(myContainer).width(); //get width of container
    var margin = (size - divWidth) / 2; //get difference and divide by 2
    var sidebarWidth = $('#sidebar').width(); //get sidebar width

    $("#sidebar").css("right",margin);
    $("#sidebar1").css("width",sidebarWidth);
})
.on('affix-top.bs.affix', function () {
  $("#sidebar").css("right","0px");
});

这也将确保侧边栏在变为“固定”状态时保持其宽度。州。

Bootstrap附加 - 当位置：固定时，将侧边栏保持在容器内

3 个答案: