Question

我正在努力使AngularJS Foundation topbar指令变得粘稠。请参阅文档：http://pineconellc.github.io/angular-foundation/#topbar

通常，这应该通过添加标准的“sticky-class”，nl来实现。 '黏'。但是，这没有任何作用。我做错了什么？

<top-bar class="sticky">
<ul class="title-area">
  <li class="name">
    <h1><a href="#">My Site</a></h1>
  </li>
  <li toggle-top-bar class="menu-icon"><a href="#">Menu</a></li>
</ul>

<top-bar-section>
  <!-- Right Nav Section -->
  <ul class="right">
    <li class="active"><a href="#">Active</a></li>
    <li has-dropdown>
      <a href="#">Dropdown</a>
      <ul top-bar-dropdown>
        <li><a href="#">First link in dropdown</a></li>
      </ul>
    </li>
  </ul>

  <!-- Left Nav Section -->
  <ul class="left">
    <li><a href="#">Left</a></li>
  </ul>
</top-bar-section>
</top-bar>

在source code中，我找到以下内容：

$scope.settings.stickyClass = $scope.stickyClass || 'sticky';
$scope.settings.stickyOn = $scope.stickyOn || 'all';
[...]
var isSticky = $scope.isSticky = function () {
       var sticky = topbarContainer.hasClass($scope.settings.stickyClass);
       if (sticky && $scope.settings.stickyOn === 'all') {
            return true;
       } 
       else if (sticky && mediaQueries.small() && $scope.settings.stickyOn === 'small') {
            return true;
       } 
       else if (sticky && mediaQueries.medium() && $scope.settings.stickyOn === 'medium') {
            return true;
       } 
       else if (sticky && mediaQueries.large() && $scope.settings.stickyOn === 'large') {
            return true;
       }
       return false;
       };

$scope.settings.stickyClass = $scope.stickyClass || 'sticky'和$scope.settings.stickyOn = $scope.stickyOn || 'all'，因此只需添加默认粘性类（sticky）即可。我错过了什么？

Answer 1

我发现了问题所在：

var topbarContainer = topbar.parent();

换句话说，sticky类需要应用于top-bar指令之前的<div>。我已经尝试过，它就是这样的。

AngularJS Foundation指令粘顶条不起作用

1 个答案: