Snippio

Fixed Sticky Social Bar

<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;height:2000px;} .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } .content { margin-left: 75px; font-size: 30px; } </style> <body> <div class="icon-bar"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> </div> <div class="content"> <h3>Sticky Social Bar</h3> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> <p>The sticky social bar will stick to the screen when you scroll.</p> <p>At Snippio, accessible from https://www.snippio.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Snippio and how we use it.</p> </div> </body> </html>

Preview