Jump to content

Make fixed markdown block appear on scroll

Recommended Posts

Site URL: https://www.oryxdentalsoftware.com/

Hello,

I created a fixed side button using a markdown block  and added this css, How I can make it appear after scrolling to half of the page for example? Thanks 

 

//floatbutton
@media screen and (min-width:780px){
#block-yui_3_17_2_1_1636542167286_21969{
display:none;}
}

#collection-615d61d5e2d9b308d84cac49
.sqs-block-markdown .sqs-block-content *:first-child{display:none;}


.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #03327c;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
  
   font-weight: bold;
   font-size: 18px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

Link to comment
On 11/10/2021 at 6:46 PM, Yaraf said:

Site URL: https://www.oryxdentalsoftware.com/

Hello,

I created a fixed side button using a markdown block  and added this css, How I can make it appear after scrolling to half of the page for example? Thanks 

 

//floatbutton
@media screen and (min-width:780px){
#block-yui_3_17_2_1_1636542167286_21969{
display:none;}
}

#collection-615d61d5e2d9b308d84cac49
.sqs-block-markdown .sqs-block-content *:first-child{display:none;}


.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #03327c;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
  
   font-weight: bold;
   font-size: 18px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

Hi @Yaraf,

Can you share the screen of this block, I can not find the id or class in your above code?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hello,

Actually I changed my mind, I will add it to the mobile header, I have the code to add it in the middle, but how I can make the elements in this order:

Burger-menu icon > logo (centered) > CTA ? And make the cta smaller?

/* Show button on mobile menu*/
@media screen and (max-width:1024px) {
 
/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
    width: 10% !important;
}
 
/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}
 

Edited by Yaraf
Link to comment

I found this code for the right order but I can't make the button smaller

@media screen and (max-width:767px) {
.header-burger.no-actions {
    order: 1 !important;
}
.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}
  
  /* show button */
.header-actions {
    display: block !important;
  
}
.header .header-actions-action--cta {
    display: block;
    width: 10%;
}
  
 
  
 
/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
  
  
  
  
}
Edited by Yaraf
Link to comment
1 hour ago, Yaraf said:

I think I solved it 

I added 

 .header-actions.header-actions--right  a{
    padding: 10px;
   font-size:12px;
    margin-left:12px;

}
  

It 's good to know, bro!

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.