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

-


i'm using angularjs develop web application. have several nested div. each of them correspond item user can select.
example of div display in official angularjs documentation :
http://plnkr.co/edit/qncmfyjpup2r0vuz0ax8?p=preview

in code each div have ng-click="gotoanchor(x)" event when click on div if partially hidden, pull on page , user can see clicked div.
have header in page first div anchor , click event not directly @ top of page. , if click on first div, scroll , header won't visible.

question is, there way activate anchor if div isn't displayed on screen ?

if have other solution anchors, take it.

thank in advance.

if understand question correctly issue when using $anchorscroll header either

a: being covered div scrolled frame,

or

b partially covering div scrolled frame.

either way there 2 solutions should review:

first

make sure you're employing css layer elements, header (if fixed) should have z-index supersedes divs. 

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

remember z-index works on positional elements (see ref)

second

employ $anchorscrollofset make sure scroll distance bumped down compensate header height. seen in angular docs, can use method in application:

.run(['$anchorscroll', function($anchorscroll) {   $anchorscroll.yoffset = 50;   // scroll 50 pixels }])

update 50 pixel height of header.

regarding visibility

there few great libraries , directives checking visibility of element - try https://github.com/thenikso/angular-inview can specify whether want enable action when top, bottom or none of div visible.

note posistioning first div correctly on page prevent scroll being necessary seen in plunkr.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more