Sticky page description not working properly

MonicaCan · April 4, 2022

Hi,

I'm trying to make the Page description ("Designer + Educator + Learner") to be sticky at the top with white background. But right now the white background is not expanding all the way to the left and right to cover the page. This is the CSS code I used:

div.page-description {
  position:fixed !important;
  z-index: 1000;
   background-color: WHITE;
   padding-top: 35px;
   padding-bottom: 20px;
   padding-right: 0px;
   margin: auto;
    margin-top: -15px;
  text-align: center;
  width: 50%;
}

Here is the screenshot:

Website: https://www.hannahpark.work/

Password: 2022

Is there any way to fix this?

Edited April 6, 2022 by MonicaCan
Spellings

tuanphan · April 5, 2022

Add this to last line in Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 130;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('body.homepage .page-description').addClass('tp-sticky');
        }
        else {
            $('body.homepage .page-description').removeClass('tp-sticky');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .page-description.tp-sticky {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9999;
    top: 74px;
}
</style>

Sticky page description not working properly

Recommended Posts

MonicaCan

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources