如何在AngularJS网页上滚动后修复元素 [英] How to fix an element after scroll in an AngularJS webpage
问题描述
我最近在AngularJs上创建了一个网站。我仍处于学习阶段。
我希望在页面到达顶部后修复页面上的元素。我已经尝试了各种Javascript和JQuery的功能。然而，他们似乎没有工作。
我也尝试过使用Angular UI的ui-scrollfix，但它也无法正常工作。
我正在分享我的代码。这是一个局部页面。请告诉我一种实现上述效果的方法。
< div class =row pdiv>
< div class =col-md-8 pdiv col-md-offset-2>
< h3>< b>关于我们< / b>< / h3>
< ul class =nav nav-justified>
< li role =presentation>< a href =ng-click =scrollTo（'weAre'）>我们是什么？< / a>< / li>
< li role =presentation>< a href =ng-click =scrollTo（'brandsAssociation'）>品牌关联< / a>< / li>
< li role =presentation>< a href =ng-click =scrollTo（'knowUs'）>了解我们< / a>< / li>
< li role =presentation>< a href =ng-click =scrollTo（'motto'）>我们的座右铭< / a>< / li>
< / ul>
< / div>
< div id =weAreclass =col-md-8 pdiv col-md-offset-2>
< br>
< h4>< b>我们是什么？< / b>< / h4>
< p>有些内容在这里。< / p>
< br>
< br>
< br>
< br>
< br>
< br>
< / div>
< div id =brandsAssociationclass =col-md-8 pdiv col-md-offset-2>
< br>
< h4>< b>品牌关联< / b>< / h4>
< p>有些内容在这里。< / p>
< br>
< br>
< br>
< br>
< br>
< br>
< / div>
< div id =knowUsclass =col-md-8 pdiv col-md-offset-2>
< br>
< h4>< b>了解我们< / b>< / h4>
< p>有些内容在这里。< / p>
< br>
< br>
< br>
< br>
< br>
< br>
< / div>
< div id =mottoclass =col-md-8 pdiv col-md-offset-2>
< br>
< h4>< b>我们的座右铭< / b>< / h4>
< p>有些内容在这里。< / p>
< br>
< br>
< br>
< br>
< br>
< br>
< / div>
< / div>
< a href =ng-click =scrollTo（'header'）>< span id =toTopclass =glyphicon glyphicon-chevron-up >< /跨度>< / A>
我需要修正ul class .nav .nav-justify它碰到页面顶部后。
我使用引导程序。
这里是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>
请帮助...
为了将 ul 修改为顶部，当它滚动到页面的顶部时，可以在其上添加一个指令来检查该窗口的 scrollTop（）超过了 ul 元素的offset 顶部。当发生这种情况时，指令可以将一个类添加到修复到顶端的元素。
因此，您的 该指令将添加CSS类 如果您想要得到一点厚颜无耻，甚至可以减少 ul
<$> c>标记看起来像这样，新指令 set-class-when-at-top p $ p> < ul class =nav nav-justifiedset-class-when-at-top =fix-to-top>
fix-to-top 到元素。指令定义如下所示：
app.directive（'setClassWhenAtTop'，function（$ window）{
var $ win = angular.element（$ window）; //将窗口对象包装为jQuery对象
return {
restrict：'A'，
link：function（scope，元素，attrs）{
var topClass = attrs.setClassWhenAtTop，//从指令的属性值中获取CSS类
offsetTop = element.offset（）。top; //获取元素相对于文档的顶部偏移量
$ win.on（'scroll'，function（e）{
if（$ win.scrollTop（）> = offsetTop）{
element.addClass（topClass）;
} else {
element.removeClass（topClass）;
}
}）;
}
};
}）;
滚动
$ $ win.on（'scroll'，function（e） {
element [（$ win.scrollTop（）> = offsetTop）？'addClass'：'removeClass']（topClass）;
}）;
并且修正了顶部 CSS类会像这样：
.fix-to-top {
position：fixed;
top：0;
}
I recently made a website in AngularJs. I am still in the learning phase. I wish to fix an element on a page after it reaches the top. I have tried all sorts of Javascript and Jquery functions. However, they don't seem to be working.
I also tried using Angular UI's ui-scrollfix but it is also not working.
I am sharing my code. It is a partial page. Please advise me a method to achieve the above mentioned effect.
<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>
I need to fix the ul class .nav .nav-justified after it hits the top of the page.
I am using bootstrap.
here are the javascript dependencies.
<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>
Please help...
To fix your ul to the top when it hits the top of the page on scroll, you can put a directive on it that checks for the window's scrollTop() exceeding the ul element's offset top. When that occurs, the directive can just add a class to the element that fixes it to the top.
So your ul markup would look like this, with new directive set-class-when-at-top on it:
<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
That directive would add the CSS class fix-to-top to the element when the element hits the top of the page. The directive definition would look like this:
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);
}
});
}
};
});
If you wanted to get a bit cheeky, you could even reduce your scroll handler to just one line:
$win.on('scroll', function (e) {
element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass);
});
And the fix-to-top CSS class would just be something like this:
.fix-to-top {
position: fixed;
top: 0;
}
Here's a fiddle.
这篇关于如何在AngularJS网页上滚动后修复元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
