1

I have a fixed-positioned-div ("under") and a relative-positioned-div ("over") that slides and covers the first when user scrolls the window:

CSS

.under {
    position:fixed;
    top:0px;
    z-index:1;
    display:block;
    width:300px;
    height:200px;
    background-color:#aaa;
}

.over {
    display:block;
    width:300px;
    height:1200px;
    position:relative;
    z-index:2;
    margin-top:200px;
    background-color:green;
}

JSFiddle

My goal is to create a jQuery script to trigger the moment when the "under" div is completely covered/hidden from the "over" div. I guess that the key is to find out if an element is visible on screen (not covered from other elements). Is it possible?

Thanks in advance.

Giorgio
  • 1,940
  • 5
  • 39
  • 64
  • @George do you mean i.e. get if scroll position is greater than "under" height? My goal is to avoid something like this (if possible) because it means that code depends on layout (in this example, "under" div with fixed position on top). It would be preferrable something like a sort of pseudo-selector or similar, because it's layout-independent. – Giorgio Nov 10 '14 at 10:02
  • 1
    Sorry I misunderstood what I said was incorrect. But yes, you will have to listen for a `scroll` event. Something like this would work: http://jsfiddle.net/z8ovo5r9/2/ – George Nov 10 '14 at 10:03
  • @George: your fiddle works correctly, but as said unfortunately it's layout dependent. Thanks anyway, +1 for help. – Giorgio Nov 10 '14 at 10:08
  • 1
    Already answered. Use `document.elementFromPoint(x,y)` as http://stackoverflow.com/a/905341/1588163 suggests. – clapas Nov 10 '14 at 12:14

0 Answers0