How do you get this result, using Jquery Scroll Event & offset/position, css or javascript? -

-

how result in css, javascript or jquery, or combination of all:

enter image description here

i asked , posted similar question before, no 1 answered it. said:

"maybe can use javascript (or bether jquery) this.  if use jquery, can use scroll event. if scrolling,  check if hits other div. https://api.jquery.com/scroll/  checking positions of divs possible offset/position.      http://api.jquery.com/offset/ https://api.jquery.com/position/  if want change background, give div background color   pink. if hits can add additional background-image    has specific background-position  (http://www.w3schools.com/cssref/pr_background-position.asp xpos ypos).    don't have tried yet, guess possible way."

so question is, how go doing result or regardless of way?

i came after couple of hours trying make work. pretty fun doing it, i'm sharing it.

$(document).ready(function() { var initscrolltop = $(window).scrolltop(); $('.div1').css('top', (initscrolltop+100)+"px");  $(window).scroll(function () {     var top = parseint($('.div1').css('top').split("px")[0]);      // give fixed top .div1     var scrolltop = $(this).scrolltop() + 100;     $('.div1').css('top', scrolltop+"px");      // getting values      // div1     var div2top = parseint($('.div2').css('top').split('px')[0]);     var div2height = parseint($('.div2').css('height').split('px')[0]);     var div2bottom = parseint($('.div2').css('bottom').split('px')[0]);      // div2      var div1width = parseint($('.div1').css('width').split('px')[0]);     var div1height = parseint($('.div1').css('height').split('px')[0]);     var div1top = parseint($('.div1').css('top').split('px')[0]);     var div1bottom = parseint($('.div1').css('bottom').split('px')[0]);     var div1left = parseint($('.div1').css('left').split('px')[0]);      // going through green box     if(scrolltop + div1height > div2top) {           // outside of green box (.div2)         if(scrolltop + div1height > div2height + div2top) {              var div3height = div2top + div2height - scrolltop;             $('.div3').css('top', scrolltop+ "px")                      // .css('bottom', div2bottom + "px")                       .css('width', div1width + "px")                       .css('height', div3height + "px")                       .css('visibility','visible');                       console.log("i'm out");         }           // inside of green box (.div2)         else {              var div3height = (div1top > div2top) ? div1height : scrolltop + div1height - div2top;             var div3top = (div1top > div2top) ? div1top : div2top;             $('.div3').css({                 'top' : div3top + "px",                 'left': div1left + "px",                 'width': div1width + "px",                 'height': div3height + "px",                 'visibility':'visible'                 });          }      } else {          $('.div3').css('visibility','hidden');     }       // absolutely out of green box (from bottom going down)     if(scrolltop > div2top + div2height) {       $('.div3').css('visibility','hidden');        }   });  });

here's there fiddle can test http://jsfiddle.net/5076h670/2/

so create 3 divs, 2 of them visible , 'collide' between each other, other 1 starts hidden , shows when position of div1 in range of div2. div3 (the third div) shown on div1 (see z-index). when it's absolutely out of box div3 hidden.

i don't know else explain code, don't know if (and don't think, took me while make work) it's understandable does. if have ask i'll reading ;)

hope helps


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