Sticky widget

Developer
Sander
Size
3,762 Kb
Views
20,240
  1. Sticky widget Previews
  2. Sticky widget HTML Codes
  3. Sticky widget CSS Codes
  4. Sticky widget JS Codes

How do I make an sticky widget?

Let a element stick to the top of the browserwindow if you scroll beyond a certain point.. What is a sticky widget? How do you make a sticky widget? This script and codes were developed by Sander on 18 December 2022, Sunday.

Sticky widget Previews
IQ Test

Sticky widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky widget</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="header"> Sticky widget </div> <div class="main"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim sollicitudin enim, quis aliquet sem vulputate ut. Nam ut tellus quam. Fusce volutpat interdum mattis. Phasellus sit amet urna ac lorem pulvinar tempus at nec velit. Nulla eu odio non nunc tristique tristique sed eu lectus. Maecenas eleifend, sem at consectetur interdum, augue elit venenatis turpis, sodales faucibus nunc tellus in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam egestas felis sed dui vulputate pellentesque. Quisque mattis, dui eu vulputate blandit, mi metus pulvinar est, quis feugiat dolor lectus eget diam. Sed eget est ultricies justo ornare convallis. Morbi fringilla, ipsum et porta ullamcorper, ante massa dignissim eros, quis commodo nisi lectus eget tellus. In hac habitasse platea dictumst. Etiam lorem dui, faucibus id suscipit a, lacinia nec elit. Mauris ac ipsum ut ante interdum mattis non quis augue. Donec venenatis, lectus eu ultrices imperdiet, odio nunc vehicula dui, a euismod nisl ligula non risus. Pellentesque at lectus enim, quis bibendum sem. Proin non urna ac mi molestie vehicula quis quis odio. In vulputate sapien fringilla purus lobortis eget tristique sapien fermentum. Morbi commodo neque quis felis viverra quis sodales enim pharetra. Nullam pellentesque, massa eu egestas condimentum, metus neque suscipit massa, et aliquet lorem metus sed eros. Donec scelerisque aliquet luctus. Curabitur elit est, interdum vel pulvinar vel, tincidunt in erat.</p> <h3>Subtitle</h3> <p>Mauris nec est eu felis ornare eleifend ac eget mi. Nunc tellus augue, placerat ac egestas id, lacinia at nulla. Donec diam nulla, blandit ac euismod sed, elementum vel lorem. Nunc vel sodales tortor. Suspendisse viverra vestibulum bibendum. Integer at mi at odio volutpat varius et ut leo. Duis non nunc leo.</p> <p>Proin id sem ac nisl rhoncus dignissim. Vivamus mollis viverra ante ut gravida. In non velit vitae risus molestie commodo eleifend ac mauris. Donec et velit a urna interdum pellentesque. Duis sit amet mi neque, vitae scelerisque diam. Aenean nec risus nec odio facilisis aliquet at venenatis felis. Donec varius cursus felis id consectetur.</p> <p>Mauris purus ante, volutpat nec tempus mollis, eleifend consectetur ante. Pellentesque a tellus nisl. Quisque tincidunt commodo pulvinar. Donec ultricies risus ac elit lobortis varius. Curabitur nec ipsum felis. Curabitur sed purus vel felis placerat consequat et et magna. Aliquam erat volutpat. Sed non massa id ligula posuere semper nec at urna. Donec eu magna ac quam facilisis blandit. Mauris at volutpat eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> </div> <div class="side"> <div class="stickyContainer"> <h2>Sticky widget</h2> <p>Nam et libero urna, sed condimentum nulla. Cras eu sapien augue, ac rutrum turpis. Ut gravida convallis leo, at volutpat sapien malesuada id.</p> </div> </div> <div class="clear"></div> <div class="footer"> &copy; 2013 Sander Keurentjes | <a href="http://www.sanderkeurentjes.nl" title="www.sanderkeurentjes.nl" target="_blank">www.sanderkeurentjes.nl</a> | <a href="http://www.d-lax.nl" title="www.d-lax.nl" target="_blank">www.d-lax.nl</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky widget - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Inder);
@import url(https://fonts.googleapis.com/css?family=Graduate);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* { font-family: 'Inder', sans-serif; line-height: 20pt; text-align: justify; color: #333;
}
body { background: #CCC;
}
h1,
h2,
h3 { /* font-family: 'Graduate', cursive; */ text-transform: uppercase; color: #D43C10;
}
a { color: #FF4F00; text-decoration: none;
}
a:hover { text-decoration: underline;
}
.wrapper { position: relative; width: 960px; padding: 0; margin: 20px auto; background: #FFF; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.header { width: 100%; height: 100px; padding: 20px 0; font-family: 'Raleway', sans-serif; font-size: 80px; font-weight: 900; line-height: 100px; text-align: center; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); background: #D43C10; border-bottom: solid 1px #CCC;
}
.main { float: left; width: 560px; margin: 0 0 0 40px; padding: 20px 0 0 0;
}
.side { position: relative; float: right; width: 280px; margin: 0 40px 0 0;
}
.stickyContainer { position: absolute; top: 10px; width: 240px; padding: 20px; background: #f0f0f0;
}
.footer { width: 100%; height: 100px; padding: 0; margin-top: 20px; font-size: 10pt; text-align: center; line-height: 100px; color: #fff; background: #121212; border-top: solid 1px #CCC
}
.clear { clear: both;
}

Sticky widget - Script Codes JS Codes

var headerTop = $(".stickyContainer").offset().top;
$(window).scroll(function(){ if( $(window).scrollTop() > headerTop ) { $('.stickyContainer').css({ position: 'fixed' }); } else { $('.stickyContainer').css({ position: 'absolute' }); }
});
Sticky widget - Script Codes
Sticky widget - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 3,762 Kb
Views 20,240
Do you need developer help for Sticky widget?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sander (skeurentjes) Script Codes
Name
Default template
Parallax scrolling background
Text 3d effct
Accordion
Custom input radio buttons
Card flip
Simple gallery
Spinning loader
3D box
Horizontal navigation
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!