Jump to content

Sticky text box

Recommended Posts

  • Replies 5
  • Views 777
  • Created
  • Last Reply
  • 1 month later...
  • 3 months later...
On 1/21/2021 at 9:32 PM, RSA said:

Hi, I can see that you managed to achieve a sticky text box with anchor links to the rest of the page on your site. Do you mind sharing how you did this/what code you need?

The site used this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
@media screen and (min-width: 641px) {
#block-yui_3_17_2_1_1593394634180_14692 div {
    position: fixed;
    z-index: 1997;
}
}
.Main-content {
    padding: 0 80px 90px 80px !important;
}
</style>
<script>
$(document).ready(function() {
    var services = $($('#block-yui_3_17_2_1_1593394634180_14692 div')[0])
    var heigh = $('.Footer').height()
    var header = $('.Header').height()
    window.addEventListener('scroll', function() {
        if (window.innerWidth >= 641) {
            if (window.scrollY + window.innerHeight + heigh + 90 > $('body').height()) {
                services.css("bottom" ,`${90 + heigh}px`)
            } else {
                services.css("bottom" , "unset")
            }
             if (window.scrollY > header) {
                services.css("top" ,"20px")
            } else {
                services.css("top" , "unset")
            }
        }
    })
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.