Change div fixed to static

Question

I want to stop the div with the class fixed from being fixed at the bottom after scrolling over the div with the class fixed.

I found a fix. with help of comments below.

I have the following JS:

var element = $(".below");
window.onscroll = function(ev) {
   var a = element.position(); 
    if (a.top <= window.scrollY + window.innerHeight) {
        $("fixed").css('position', 'static');
    } else{
       $("fixed").css('position', 'fixed');
   }
};

I have the following HTML:

<header>
</header>
<section>
  Some html and text here here
</section>
<section class="fixed" style="position: fixed; width: 100%; bottom: 0;">
  text
</section>
<section class="below">
</section>
<footer>
</footer>

but can it be made beter?

And what did you try already? Respect other people's time... — Sebastian, Aug 22 '17 at 12:38
Search about ScrollTop then change style when your div shows up on the screen. Since you didn't write any jquery i don't want to write either lol — user5014677, Aug 22 '17 at 12:40
if ([`scrollTop`](http://api.jquery.com/scrollTop/) > [`offset().Top`](http://api.jquery.com/offset/)) `.fixed` = `fixed` basic logic. — Abhishek Pandey, Aug 22 '17 at 12:44
@Sebastian thnx for you feedback. I have looking every where but I can't find any thing useful. I been trying to use ScrollTop but can't find a why to make it dynamic. I have been trying to use https://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point but that is not working because my height changes Sorry I don't want to look leazy ( witch I am :-) ) but I really have not found any thing very useful. — Roy van Wensen, Aug 22 '17 at 12:48

score 1 · Answer 1 · answered Aug 22 '17 at 12:45

YOu could use https://stackoverflow.com/a/9439807/2894798 to implement the scroll detection like the example...

var element = document.querySelector(".fixed");
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        element.style.position = 'absolute';
    }
};

<header>
</header>
<section style="position:relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu eget metus consequat fermentum. Morbi mattis, ante ut luctus interdum, dui purus ultrices enim, ut egestas ipsum felis eget nisl. Cras id mauris eget turpis hendrerit tristique. Suspendisse quis orci neque. Morbi auctor neque vitae elit facilisis, ut aliquam augue viverra. Proin porta magna vitae turpis ornare dignissim. Suspendisse at eros faucibus, eleifend nibh a, mollis risus. Nam sit amet ex leo. Duis turpis arcu, commodo non gravida id, ornare eget orci. Integer eu ligula dolor. Maecenas pulvinar mollis ex, in efficitur diam tristique quis.

In hac habitasse platea dictumst. Ut sed mauris in ex interdum faucibus id quis nisi. Mauris nec tellus in mauris dignissim rutrum. Nam vitae mattis neque. Phasellus eget mi sagittis, porta dui sit amet, porta nunc. Quisque porta suscipit nulla ac vulputate. Vestibulum at purus sed magna rutrum porttitor sit amet dignissim turpis. Mauris sed hendrerit purus. Quisque consequat interdum ligula, sed pretium ex rhoncus vitae. Morbi blandit turpis sed arcu ornare vehicula. Duis ac velit fermentum, tincidunt est at, sagittis nunc. Pellentesque quis elementum purus.

Quisque venenatis convallis lacus, ac fermentum lectus. Fusce mollis nibh sit amet ante ornare, eu mattis augue porttitor. Nulla nibh justo, suscipit eu dui ac, porttitor molestie lacus. Curabitur sed auctor massa. In rutrum eu neque non vestibulum. Mauris pellentesque, dolor id gravida gravida, magna nibh malesuada dolor, et auctor orci est eu velit. Phasellus volutpat, turpis non faucibus cursus, elit augue tincidunt lacus, quis dictum elit mauris eu lorem. Vivamus volutpat convallis volutpat. Sed luctus ipsum ante, eu varius augue dictum ac. Proin sit amet elit accumsan, tincidunt tellus non, lobortis tellus. Sed id nulla sed lectus mattis vestibulum nec et risus. Vivamus malesuada consectetur libero vitae tincidunt. Aenean at convallis odio. Nullam sagittis lectus neque, luctus ultrices ipsum varius sed. Phasellus ac blandit turpis. Pellentesque sapien sem, ullamcorper sed porttitor eu, euismod non ex.

Sed eu metus id est efficitur varius. Donec sagittis venenatis justo, vitae egestas arcu lacinia quis. Sed volutpat mollis porta. Integer id molestie felis, id venenatis felis. Praesent ullamcorper lorem in dapibus dapibus. Nunc non urna nec nisi sollicitudin posuere. Cras non ex metus.

Nam porta purus purus, vitae rutrum ligula maximus vitae. Proin sapien eros, eleifend non magna accumsan, rhoncus lobortis risus. Etiam rutrum nibh eu neque aliquet, eget faucibus quam auctor. Nullam posuere convallis leo, eu rhoncus ligula. Fusce fermentum justo nunc, et porttitor felis eleifend sit amet. Quisque tristique erat eu imperdiet efficitur. Vestibulum rhoncus dolor felis, elementum venenatis lectus pretium ut.
<section class="fixed" style="position: fixed; width: 100%; bottom: 0;background:red;">
text
</section>
</section>

<footer>
</footer>

Thanks for trying to help! But its not about the detecting the bottom but the I want to detect the top of a the div .fixed. — Roy van Wensen, Aug 22 '17 at 13:02

Change div fixed to static

1 Answers1