"Sticky Affix"
Bootstrap 3.3.0 Snippet by mrservon22

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <style> #alert{background:#ffebf7; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; padding:10px;} .affix#alert {position:fixed; top:0px; background:#f09; color:#fff; padding:10px; } </style> <script> $( document ).ready(function() { $('#alert').affix({ offset: { top: 100 , bottom: function () { return (this.bottom = $('#footer').outerHeight(true)) } } }) }); </script> </head><div class="container"> <div class="row"> <div class="col-xs-12"> <p>Quisque quis urna at risus pellentesque fringilla. Morbi feugiat velit mi, vitae gravida leo malesu ada et. Pellentesque tristique pellentesque neque sed molestie. Vestibulum vel ornare risus, sit amet tempus leo. Vivamus dictum eleifend eros ac porta. Integer sit amet pharetra diam. Integer et erat purus. Sed gravida, leo quis viverra pellentesque, dolor est imperdiet metus, id congue augue tellus quis nunc. Aenean placerat at nisi sed scelerisque. Sed pharetra dignissim lectus consequat semper. Cras viverra convallis libero id molestie. Integer ut neque adipiscing, pulvinar est sed, viverra dolor. Nulla posuere dui sed tortor consectetur, vel porttitor urna bibendum. Vestibulum pharetra augue vitae ultrices fermentum. Donec pellentesque, tellus non fermentum feugiat, ante tortor auctor urna, semper ultrices justo mauris at lorem. Nullam dapibus massa sit amet neque commodo malesuada.</p> <p></p> <div id="alert"> Fusce faucibus vestibulum ligula id faucibus. Vivamus ut est sed metus porta rutrum. Nam laoreet lectus a nibh lobortis, tempus lobortis ipsum laoreet. Pellentesque vitae eros eu neque semper euismod. Maecenas nec eleifend tellus. Nam viverra nulla tellus, non consectetur nisi tincidunt eu. Aliquam erat volutpat. Curabitur ac massa id nunc consequat tristique. Nunc sed aliquet neque. Morbi dictum sem dolor, vitae malesuada orci luctus vitae. Mauris eu sapien massa. Integer at varius ligula. Pellentesque vitae urna porta, imperdiet sem eu, porta odio. Curabitur cursus tincidunt risus, vel cursus quam convallis quis. Cras ornare ultrices mi volutpat semper. Suspendisse lectus felis, semper in pretium eu, sollicitudin a massa. </div> <p></p> <p>Aenean egestas lorem eu ultrices egestas. Nunc laoreet, metus a pulvinar fermentum, sem felis vestibulum enim, quis posuere libero est et est. Vivamus eget risus dapibus, dictum purus ut, molestie lectus. Pellentesque facilisis adipiscing tellus, eu facilisis dolor ullamcorper sed. Aliquam tempus, diam non elementum suscipit, sapien enim ullamcorper magna, eu venenatis ligula purus ut orci. Donec vehicula mi eget mi dictum, vel gravida turpis pulvinar. Duis bibendum facilisis orci eget sollicitudin. Curabitur et tellus placerat, accumsan nulla at, bibendum est. Mauris dapibus venenatis urna eget eleifend. Vestibulum luctus orci nulla, nec rhoncus sem placerat ac. Fusce suscipit consectetur lorem nec accumsan. Cras fringilla condimentum ultrices. Sed ac sodales quam. Praesent cursus sed diam sit amet scelerisque.</p><p>Phasellus sem mauris, semper ut fermentum varius, lobortis vitae orci. Aliquam id velit molestie, semper velit pretium, sodales turpis. Quisque convallis justo in augue sollicitudin, vel laoreet risus laoreet. Suspendisse tincidunt cursus interdum. Pellentesque sit amet justo sem. Cras euismod ligula vel augue dignissim, non porta enim laoreet. Sed leo metus, molestie vel elementum ut, accumsan et eros. Nunc euismod lectus sit amet aliquam fringilla. Aenean ornare laoreet metus. Phasellus pulvinar nunc magna, eu ullamcorper quam tincidunt eget. Donec blandit commodo imperdiet. Curabitur lobortis nulla a neque viverra pharetra.</p> <p>Quisque quis urna at risus pellentesque fringilla. Morbi feugiat velit mi, vitae gravida leo malesuada et. Pellentesque tristique pellentesque neque sed molestie. Vestibulum vel ornare risus, sit amet tempus leo. Vivamus dictum eleifend eros ac porta. Integer sit amet pharetra diam. Integer et erat purus. Sed gravida, leo quis viverra pellentesque, dolor est imperdiet metus, id congue augue tellus quis nunc. Aenean placerat at nisi sed scelerisque. Sed pharetra dignissim lectus consequat semper. Cras viverra convallis libero id molestie. Integer ut neque adipiscing, pulvinar est sed, viverra dolor. Nulla posuere dui sed tortor consectetur, vel porttitor urna bibendum. Vestibulum pharetra augue vitae ultrices fermentum. Donec pellentesque, tellus non fermentum feugiat, ante tortor auctor urna, semper ultrices justo mauris at lorem. Nullam dapibus massa sit amet neque commodo malesuada.</p> <p>Fusce faucibus vestibulum ligula id faucibus. Vivamus ut est sed metus porta rutrum. Nam laoreet lectus a nibh lobortis, tempus lobortis ipsum laoreet. Pellentesque vitae eros eu neque semper euismod. Maecenas nec eleifend tellus. Nam viverra nulla tellus, non consectetur nisi tincidunt eu. Aliquam erat volutpat. Curabitur ac massa id nunc consequat tristique. Nunc sed aliquet neque. Morbi dictum sem dolor, vitae malesuada orci luctus vitae. Mauris eu sapien massa. Integer at varius ligula. Pellentesque vitae urna porta, imperdiet sem eu, porta odio. Curabitur cursus tincidunt risus, vel cursus quam convallis quis. Cras ornare ultrices mi volutpat semper. Suspendisse lectus felis, semper in pretium eu, sollicitudin a massa.</p> <p>Aenean egestas lorem eu ultrices egestas. Nunc laoreet, metus a pulvinar fermentum, sem felis vestibulum enim, quis posuere libero est et est. Vivamus eget risus dapibus, dictum purus ut, molestie lectus. Pellentesque facilisis adipiscing tellus, eu facilisis dolor ullamcorper sed. Aliquam tempus, diam non elementum suscipit, sapien enim ullamcorper magna, eu venenatis ligula purus ut orci. Donec vehicula mi eget mi dictum, vel gravida turpis pulvinar. Duis bibendum facilisis orci eget sollicitudin. Curabitur et tellus placerat, accumsan nulla at, bibendum est. Mauris dapibus venenatis urna eget eleifend. Vestibulum luctus orci nulla, nec rhoncus sem placerat ac. Fusce suscipit consectetur lorem nec accumsan. Cras fringilla condimentum ultrices. Sed ac sodales quam. Praesent cursus sed diam sit amet scelerisque.</p> <p>Phasellus sem mauris, semper ut fermentum varius, lobortis vitae orci. Aliquam id velit molestie, semper velit pretium, sodales turpis. Quisque convallis justo in augue sollicitudin, vel laoreet risus laoreet. Suspendisse tincidunt cursus interdum. Pellentesque sit amet justo sem. Cras euismod ligula vel augue dignissim, non porta enim laoreet. Sed leo metus, molestie vel elementum ut, accumsan et eros. Nunc euismod lectus sit amet aliquam fringilla. Aenean ornare laoreet metus. Phasellus pulvinar nunc magna, eu ullamcorper quam tincidunt eget. Donec blandit commodo imperdiet. Curabitur lobortis nulla a neque viverra pharetra.</p> </div> <div id="footer" class="col-md-12">Footer</div> </div> <div id="push"></div> </div>

Related: See More


Questions / Comments: