Question

我试图将侧边栏与我的主要内容相对应。我在这里试过指令。虽然我通过顶部词缀获得了成功，但是当向下滚动时它可以工作并且保持顶部，但是在我的侧边栏内容更长的情况下它无法滚动。我想将它修复到顶部并根据主要内容将其移动。但如果它的内容更多，那么它应该向下滚动，同时坚持到底部。

<div class="background-white" sidebar-affix data-spy="affix" data-offset-top="80" data-offset-bottom="10">My sidebar content here</div>

.directive('sidebarAffix', function($window) {
    return {
        restrict: 'EA',
        link: function(scope, element, attrs) {
            var originOffsetTop = element[0].offsetTop;
            scope.condition     = function() {
                return $window.pageYOffset > originOffsetTop;
            };

            angular.element($window).bind('scroll', function() {
                scope.$apply(function() {
                    console.log($window.pageYOffset > originOffsetTop);
                    if (scope.condition()) {
                        angular.element(element).removeClass('affix-top');
                        angular.element(element).addClass('affix');
                    } else {
                        angular.element(element).addClass('affix-top');
                        angular.element(element).removeClass('affix');
                    }
                });
            });
        }
    };
})

我希望可以滚动，以防侧栏长于预期，但在这种情况下它应该坚持到底。

Answer 1

给出菜单位置怎么样：固定;和顶部：XXpx然后它将始终保持在同一个地方，即使你滚动你的内容

.wrapper > div{
  display:inline-block;
}
.side-bar  {
  position:fixed;  
  top:10px;
}
.content {
  
}

<div class='wrapper'>
  <div class='side-bar'></div>
  <div class='content'></div>
</div>

Answer 2

这可能是旧帖子。但是，您是否考虑将其作为单独的视图并将其加载到索引页中。而不是使用CSS处理它。通过这样做，您可以编写一个单独的控制器来访问侧边栏，当然它将被修复，您还可以添加其他视图，如页眉，页脚，并为每个视图定义一个单独的控制器，并定义一个单独的容器来加载主要内容。这可能不是您要求的准确答案（指令）。只是一个建议。

发布样本html

IF(exp3.id != 0, 1,IF(exp2.id != 0, 1, IF(exp.id != 0, 1, 0))) 
FROM rates AS r
    LEFT JOIN
    exclusion_policies AS exp ON (
      exp.client_id       = r.client_id AND
      exp.mcc             = r.mcc AND
      exp.mnc             = r.mnc AND
      exp.active          = 1
    )
    LEFT JOIN
    exclusion_policies AS exp2 ON (
      exp2.client_id     = r.client_id AND
      exp2.mcc           = r.mcc AND
      exp2.mnc           IS NULL AND
      exp2.active        = 1
    )
    LEFT JOIN
    exclusion_policies AS exp3 ON (
      exp3.client_id     = r.client_id AND
      exp3.mcc           IS NULL AND
      exp3.mnc           IS NULL AND
      exp3.active        = 1
    )

Answer 3

将max-height设置为100％并增加margin-top以找到设置位置的适当位置最大高度：100％; 保证金最高限额：50％; 将max-height添加到body和margin top to div希望这可以解决问题

用于粘贴侧边栏的Angular指令

3 个答案: