Question

我最近在AngularJs建立了一个网站。我还在学习阶段。我希望在页面到达顶部后修复它。我尝试了各种Javascript和Jquery函数。但是，他们似乎没有工作。

我也尝试过使用Angular UI的ui-scrollfix，但它也无法使用。

我正在分享我的代码。这是一个部分页面。请告诉我一种实现上述效果的方法。

<div class="row pdiv">


    <div class="col-md-8 pdiv col-md-offset-2">
        <h3><b>About Us</b></h3>
        <ul class="nav nav-justified">
            <li role="presentation"><a href="" ng-click="scrollTo('weAre')">What are    we?</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('brandsAssociation')">Brands Associations</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('knowUs')">Know Us</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('motto')">Our Motto</a></li>
        </ul>
    </div>

    <div id="weAre" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>What are we?</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

    <div id="brandsAssociation" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>Brands Associations</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

    <div id="knowUs" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>Know Us</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

    <div id="motto" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>Our Motto</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

</div>


<a href="" ng-click="scrollTo('header')"><span id="toTop" class="glyphicon glyphicon-chevron-up"></span></a>

我需要在点击页面顶部后修复ul类.nav .nav-justified。

我正在使用bootstrap。

这里是javascript依赖项。

<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

请帮忙......

Answer 1

要在ul滚动到页面顶部时将其固定到顶部，您可以在其上放置一个指令，检查超出{{scrollTop()的窗口offset 1}}元素＆＃39; s fiddle顶部。当发生这种情况时，该指令只需将一个类添加到将其修复到顶部的元素。

所以你的ul标记看起来像这样，上面有新的指令ul：

set-class-when-at-top

当元素到达页面顶部时，该指令会将CSS类<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">添加到元素中。指令定义如下所示：

fix-to-top

如果你想变得有点厚颜无耻，你甚至可以将你的app.directive('setClassWhenAtTop', function ($window) { var $win = angular.element($window); // wrap window object as jQuery object return { restrict: 'A', link: function (scope, element, attrs) { var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value offsetTop = element.offset().top; // get element's offset top relative to document $win.on('scroll', function (e) { if ($win.scrollTop() >= offsetTop) { element.addClass(topClass); } else { element.removeClass(topClass); } }); } }; });处理程序缩减为一行：

scroll

$win.on('scroll', function (e) { element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass); }); CSS类就是这样的：

fix-to-top

这里是{{3}}。

Answer 2

我开始使用MikeJ的优秀答案开始，但很快就意识到了一些缺点：

在第一次解析指令后，没有考虑元素上方的内容何时动态更改
固定元素下方的内容在元素固定后向上移动并从正常文档流中移除
如果将此元素固定在其他位置（如顶层菜单），则可能在计算正确位置时遇到一些问题;您需要在offset top超过$win.scrollTop()之前修复它，以便它不会在该菜单后面消失，然后在之后得到修复。

为了解决这些问题，我想出了一个修改版本：

function setClassWhenAtTop($window) {
    var $win = angular.element($window);

    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var topClass = attrs.setClassWhenAtTop,
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                parent = element.parent(),
                offsetTop;

            $win.on("scroll", function () {
                // dynamic page layout so have to recalculate every time;
                // take offset of parent because after the element gets fixed
                // it now has a different offset from the top
                offsetTop = parent.offset().top - topPadding;
                if ($win.scrollTop() >= offsetTop) {
                    element.addClass(topClass);
                    parent.height(element.height());
                } else {
                    element.removeClass(topClass);
                    parent.css("height", null);
                }
            });
        }
    };
}

这需要将要修复的元素包装在仅包含要修复的元素的空父级中。这是为了处理知道元素的原始偏移位置（用于将其放回到文档流中）以及具有原始元素的高度以保持文档流动的原样。另外，传递paddingWhenAtTop的属性以更快地修复它（或者如果需要，可以稍后修复）。

HTML更改中的用法如下：

<div>
  <ul class="nav nav-justified" set-class-when-at-top="fix-to-top" padding-when-at-top="50">
</div>

Answer 3

这是我试图让它成为完整的angularjs：

JS

.directive('setClassWhenAtTop', ['$window', function($window) {
    var $win = angular.element($window); // wrap window object as jQuery object

    return {
        restrict: 'A',
        link: function (scope, element, attrs)
        {
            var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                offsetTop = element.prop('offsetTop'); // get element's offset top relative to document

            $win.on('scroll', function (e) {
                if ($window.pageYOffset + topPadding >= offsetTop) {
                    element.addClass(topClass);
                } else {
                    element.removeClass(topClass);
                }
            });
        }
    };
}])

CSS

.fix-to-top {
    position: fixed;
    top: 55px;
    height: 50px;
    z-index: 999;
    width: 100%;
}

HTML

<div class="navigation-bar" set-class-when-at-top="fix-to-top" padding-when-at-top="55"> 
...

跳过jquery的主要更改：

parent.offset().top => element.prop('offsetTop')
$win.scrollTop() => $window.pageYOffset

当天的提示： 请你永远停止给jjery答案的angularjs标题问题！或至少在你的标题或答案要求中明确指出;-)

如何在AngularJS网页中滚动后修复元素

3 个答案: