Define a bottom position for a floating element

Hi there,

You may have to do some scripting with this because CSS isn't programmable meaning you can't put conditions on it.

The page will need a script that checks if the scroll position is the bottom of the page and then assigns a new top position for the sticky element.

Example: (jQuery)

<script>
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(".wplogout-social-wrapper").css('top', '40%');
   }
});
</script>

Not exactly sure if the plugin you use for that has a built-in option for this so you may have to ask the plugin's developer/support for best practices. (Perhaps this has already been asked before)

Hi Elvin, Thanks for elaborating on this. I made this social sharing element with php/html/css without plugin so I'm sure we can add the javascript code as well but I'm not sure where to put the javascript code. Please help me find out.
(I had asked about the comment section from the same page before).

You generally hook JS snippets on the wp_footer of the site.

You can use a Hook Element for this. :)

place something like this code in its code area.

<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(".wplogout-social-wrapper").css('top', '40%');
} else {
$(".wplogout-social-wrapper").css('top', '45%');
}
});
</script>

No luck :(

Try this script and styling.

<script>
document.addEventListener('DOMContentLoaded', function(e) {
    document.addEventListener('scroll', function(e) {
			var socialwrapper = document.querySelector('.wplogout-social-wrapper');
        let documentHeight = document.body.scrollHeight;
        let currentScroll = window.scrollY + window.innerHeight;
        // When the user is [modifier]px from the bottom, fire the event.
        let modifier = 0; 
        if(currentScroll + modifier >= documentHeight) {
            socialwrapper.classList.add('top-change');
        } else {  socialwrapper.classList.remove('top-change'); }
    })
})
</script>

<style>.wplogout-social-wrapper{ position: fixed; top: 45%; transition: top 0.5s ease 0s;} .top-change{top: 25% !important;}</style>

This is working like a charm :D
Thanks so much, Elvin. You're too good!

I've added a value of what I thought looked fine but you can adjust the top value of .top-change{top: 25% !important;} to your preference. :D

No problem. Glad to be of any help. :D

25% is exactly where I wanted it to be :D
Greatly appreciate it Elvin :)

Nice one. no problem. :D