Sticky Fixed Right Button
Question
Following is my fiddle in which I am trying to make sticky button to the right. Issue I am facing is that its not Vertically Center aligned and its not working on IE 9. Kindly let me know how can I fi this issue.
FIDDLE: http://jsfiddle.net/Zw8Sb/
#feedback {
height: 0px;
width: 65px;
position: fixed;
right: 0;
top: 55%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background: #06c;
height: 15px;
width: 165px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
}
#feedback a:hover {
background: #CCC;
}
2 answers
solution1
4 2013-11-14 09:48:42
How about this fiddle?
CSS:
.center{
position: fixed;
top: 50%;
right: 0px;
width: 115px;
height: 0px;
text-align:right;
z-index:9999;
margin-top:-15px;
}
.center a{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
background: #06c;
text-align:center;
height: 15px;
width: 165px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
}
.center a:hover {
background: #CCC;
}
solution2
-1 2017-07-21 19:32:16
<style> body {margin:0;} .navbar { overflow: hidden; background-color: #999; position: fixed; top: 35%; width: 50%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } </style>
<!DOCTYPE html> <html> <head> </head> <body> <div class="navbar"> <a href="tel:+91"><b>Toll Free: +91 (Type Number)</b></a> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Is there a way to add a delay and fade in form the right to a sticky button?
Messenger Button fixed to right bottom corner on mobile
How to add fixed button to the bottom right of page
Position Fixed 'button', turned 90 degree, fixed to the right side of the screen
Sticky sidebar and fixed column
Sticky Footer with fixed navbar
Fixed sticky header
sticky div fixed position
Sticky Navbar not fixed
Bootstrap 4 fixed and sticky header
Related Tags