-2

I have HTML like this:

<div class="cont">
<!-- some elements -->
    <div class="child fixed">Child</div>
</div>

child is with position fixed (class fixed). Inside cont there are another elements, which make it with higher height than child.

I have scroll event on document:

$(document).scroll(function(e) { ... }

I want when some1 scroll and child is at the bottom of cont to remove fixed class.

How can I detect on scroll (document scroll) that some element is at the bottom of some parent element (I mean when bottom of the child is in the same position as its parent cont.) ?

Edit

@devlincarnate this is not "how to check is it last child" question.

halfer
  • 19,824
  • 17
  • 99
  • 186
gdfgdfg
  • 3,181
  • 7
  • 37
  • 83
  • Possible duplicate of [jQuery: how do I check if an element is the last sibling?](https://stackoverflow.com/questions/2681581/jquery-how-do-i-check-if-an-element-is-the-last-sibling) – devlin carnate Jul 24 '19 at 17:58
  • Hi, this is last child. How question for getting last child and get the position of an element are the same ? – gdfgdfg Jul 24 '19 at 18:02
  • @devlincarnate you can learn here, what is last child: https://www.w3schools.com/cssref/sel_last-child.asp – gdfgdfg Jul 24 '19 at 18:05
  • 2
    When you remove the `fixed class` what should happen ? I mean if scrolling back re-assigns the `class`. Any clarifications would really help. – ThS Jul 24 '19 at 18:12
  • 1
    What do mean by some element is at the bottom of some parent element? – fiveelements Jul 24 '19 at 18:13
  • I mean when bottom of the `child` is in the same scroll position as its parent `cont`. – gdfgdfg Jul 24 '19 at 18:16
  • 3
    I already see, you remove a fixed class and than you're left wondering in perplexity why the entire page jump-snapped and increased in height. That's at least what I got from the question and the code you provided. Create a [mcve] and explain what you're after exactly. Because by simply making an element unfixed is like asking for more problems. Seems you have an [XY problem](https://en.wikipedia.org/wiki/XY_problem). – Roko C. Buljan Jul 24 '19 at 18:32
  • Thanks, I want only to detect the bottom positions of these two elements `cont` and `child` relative to the window or document. I don't want more. What I will do after that will complicate the question. The problem here is only detecting bottom positions of these two elements. – gdfgdfg Jul 24 '19 at 18:37
  • This is my issue. Removing/adding the class don't break the template. – gdfgdfg Jul 24 '19 at 18:40
  • 1
    Or maybe this is your solution https://jsfiddle.net/82hrto9b/ ? - That's what I meant by saying [*"XY-problem"*](https://en.wikipedia.org/wiki/XY_problem) – Roko C. Buljan Jul 24 '19 at 18:41

1 Answers1

1

Sometimes you just don't need JS. This is what I'd do, using CSS position: sticky - if I got your question (and problem) right...

* { margin: 0;box-sizing: border-box; }
body { border: 10px dashed #000; }

#footer { background: #0fb; height: 150vh;}
#cont   { background: #0bf; height: 200vh;}
#child  { background: #f0b; height: 20vh;
  position: sticky;
  top: 0;
}
<div id="cont">
  <div id="child">CHILD FIXED.... and magical</div>
   CONTENT...
</div>
<div id="footer">FOOTER</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Hi, thanks for the solution. It is really elegant and I will use it (not so good support, doesn't matter in this case). – gdfgdfg Jul 24 '19 at 21:13