CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Mtoypc
Mtoypc

Reputation: 494

How to use angularjs $anchorScroll on div only if div is hidden?


I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview

In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.

So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?

If you have an other solution than anchors, I take it.

Thank you in advance.

Upvotes: 0

Views: 1361

Answers (1)

joel.software
joel.software

Reputation: 1515

If I understand your question correctly the issue is that when using $anchorScroll your header is either

a: Being covered up by the div scrolled into frame,

or

b Partially covering up the div that is scrolled into frame.

Either way there are two solutions you should review:

First

make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.

.header  { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}

REMEMBER Z-index only works on positional elements (See ref)

Second

Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:

.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])

Update 50 to be the pixel height of your header.

Regarding visibility

There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.

Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

Upvotes: 1

Related Questions