I have a Bootstrap modal with a scroll bar and I'd like that each time a user clicks on a button in the modal body, I execute a function that goes to the next step of a wizard within the modal. The issue is, I want that every time a button is clicked and I go to the next step, I want the scrollbar of the modal to return to the top of the modal.
I know you can achieve this easily within a web page using "window.scrollTo(0, 0)" but how do I achieve this within a Bootstrap modal.
Thanks
You can use the jQuery scrollTop function
$(document).ready(function() {
let $modal_body = $('.modal-body')
let $scroll_btn = $('.scroll-to-top')
$scroll_btn.click(function() {
$modal_body.scrollTop(0)
})
})
.modal-body {
max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada semper sem, at congue odio iaculis vitae. Morbi tempus ut quam at semper. Etiam ultrices nunc sed velit pellentesque, sit amet dignissim eros dapibus. Etiam laoreet eros eget
justo efficitur porttitor. Sed eget commodo eros. Nulla non eros ac nulla vestibulum placerat eu quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean tempor augue eget rhoncus luctus. Vestibulum metus quam, egestas
non justo ut, mattis pulvinar mauris. Donec eget nulla suscipit, lacinia libero in, rhoncus ex. Etiam consectetur tincidunt enim sed hendrerit. Suspendisse quis lobortis eros. Nulla sodales sagittis nisl, a malesuada nibh.
</p>
<p>
Ut dignissim metus vitae purus tempus, non suscipit dui dapibus. Nullam facilisis sapien sit amet nibh pulvinar gravida. Praesent quis mauris eu arcu aliquam rutrum. Nullam congue sodales nulla, in consectetur nibh. Donec feugiat, diam a congue dictum,
erat libero consectetur dui, ut iaculis nunc leo at metus. Aliquam pellentesque vehicula nisl et faucibus. Fusce vitae nulla vitae lectus consectetur semper eu vitae sapien. Morbi eu erat volutpat, tempus lorem non, rutrum mi. Duis tempus ipsum
vel placerat tincidunt. Quisque pellentesque suscipit nibh a congue. Sed malesuada, risus ac pellentesque viverra, odio eros ultricies elit, nec lobortis purus enim vitae ligula.
</p>
<p>
Sed ultricies, ante at commodo dignissim, nibh nunc pharetra augue, sit amet consequat ipsum nisl vitae urna. Etiam varius lacus sed ornare malesuada. Nullam pulvinar pharetra leo, at eleifend metus fringilla eu. Quisque eget fringilla turpis, malesuada
luctus turpis. Sed molestie laoreet porta. Mauris condimentum ut erat a tincidunt. Duis id vehicula ligula, ac congue neque. Mauris accumsan urna ac accumsan consectetur. Nunc sodales sem sed nulla imperdiet, in pharetra justo congue. Integer
ullamcorper sem quis quam mattis tristique. Nulla pretium congue dictum.
</p>
<p>
Nullam lectus massa, ornare vel dictum et, egestas in augue. Curabitur porttitor sem ex, et lacinia leo cursus quis. Morbi eu dapibus mauris. Fusce volutpat non ex eget lacinia. Vestibulum ex dui, sollicitudin a enim vel, volutpat varius turpis. Donec
volutpat, est non pharetra efficitur, purus neque consectetur tellus, vitae scelerisque quam felis eu quam. Fusce dictum ornare est, vitae facilisis metus fermentum et. Pellentesque porta purus nec tincidunt congue. Donec bibendum volutpat ligula
id ultricies. Vivamus non ante nec enim rutrum feugiat ut eget magna. Fusce justo quam, venenatis sed purus eget, ultrices consequat elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
Morbi pretium convallis eros non viverra. Integer lectus lectus, imperdiet eget erat in, lacinia pellentesque turpis.
</p>
<p>
Maecenas pulvinar justo at sodales fermentum. Pellentesque nec suscipit mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus arcu risus, consectetur vel pellentesque sed, accumsan in turpis. Nunc
quis enim aliquet, placerat ligula at, imperdiet mi. Morbi viverra pellentesque dolor, et fermentum metus vestibulum sit amet. Sed vel felis egestas, maximus libero id, tincidunt ante. Quisque sed risus quis magna auctor mattis. Etiam tempor
scelerisque augue non malesuada. Sed accumsan dui tellus. Mauris dignissim ante quis rhoncus lobortis. Mauris sollicitudin nunc nec mattis vehicula.
</p>
<p>
Proin non ex tellus. Etiam ornare neque sed nisi aliquet interdum. Nulla blandit tempor risus, at pharetra mi scelerisque eu. Suspendisse luctus sapien et tortor scelerisque facilisis. Nulla a augue pharetra, vehicula odio aliquam, venenatis ligula. Aenean
et odio odio. Morbi commodo viverra ipsum, consectetur aliquet dui dapibus vitae. Nunc egestas nec augue in mattis. Sed vehicula a tortor et blandit. Praesent augue ex, auctor vitae tincidunt vel, molestie dignissim lorem. Sed ligula urna, commodo
et finibus quis, laoreet vitae urna. Fusce feugiat nulla molestie, lobortis quam sit amet, vehicula mi. Aliquam eget tincidunt mi.
</p>
<p>
Proin dapibus consequat quam, sed tincidunt velit. Curabitur dolor tellus, gravida eu pretium ac, mattis eu turpis. Integer quis risus lobortis, consectetur magna in, rhoncus ipsum. Vestibulum ullamcorper lectus sed condimentum viverra. Nunc egestas lobortis
urna ut luctus. Integer nunc velit, mattis non sodales non, suscipit quis nibh. Integer vitae eros ligula. Integer gravida facilisis viverra. Maecenas interdum odio ut semper efficitur. In dapibus a lorem dapibus feugiat. Morbi non posuere lacus.
</p>
<p>
Maecenas facilisis luctus dapibus. Phasellus congue turpis magna, ut congue nisi fermentum sit amet. Fusce non risus ac metus posuere bibendum in sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec sed gravida ligula. Fusce rhoncus auctor dui, id mollis lectus porta eget. Donec ullamcorper non est et porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nam eu dolor in libero gravida commodo sit amet id nibh. Nam massa nisl, rhoncus eu tempus in, dignissim et turpis. Proin aliquam convallis accumsan. Maecenas in vehicula elit, a pellentesque mi. Maecenas feugiat purus nec euismod elementum. Nam vel purus
laoreet, facilisis tellus vel, vehicula odio. Pellentesque est elit, vulputate gravida felis vitae, consequat varius diam. Donec imperdiet aliquet lobortis. Donec nec dictum nisl. Pellentesque blandit ac est ut suscipit. Vivamus nec eros in
neque fringilla dictum eget non ligula. Pellentesque condimentum convallis dolor, non pharetra eros aliquet a. Donec nisl risus, pretium ut aliquam vitae, efficitur vel mauris. Praesent feugiat facilisis dolor, non aliquam lectus suscipit sed.
Aenean dictum nisi ut euismod lacinia. Quisque scelerisque ultricies viverra.
</p>
<p>
Aenean nibh ipsum, posuere sed aliquet ac, laoreet imperdiet lacus. Nunc tellus ex, cursus rutrum purus vitae, iaculis facilisis orci. Pellentesque vitae iaculis massa. Proin fringilla risus dui, ac pulvinar purus eleifend a. Duis at tellus non nulla
tempor vulputate. In dignissim, enim id bibendum condimentum, urna ante consequat odio, in varius augue massa eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor, nibh id hendrerit scelerisque, metus purus malesuada
nisl, quis bibendum mauris nibh at dui. Vestibulum viverra nulla faucibus, ornare felis a, rutrum nisl. Maecenas eu porttitor nulla. Nunc viverra urna eu ex rhoncus dapibus. Nulla non dignissim mi, nec facilisis ipsum. Integer vitae leo eget
velit consequat consequat nec sed dui. Pellentesque ipsum urna, egestas et ipsum eget, venenatis fringilla dui.
</p>
<p>
Nullam maximus risus ac sapien ullamcorper, ac euismod erat faucibus. Duis vel est quis leo malesuada porttitor. Nullam hendrerit sagittis commodo. Mauris finibus dictum orci, eget euismod nulla consequat eu. Integer ultricies nisl vel lorem pulvinar,
nec maximus massa efficitur. Donec venenatis dictum sem a elementum. Phasellus lectus augue, cursus at nulla in, scelerisque vulputate lorem. Pellentesque pellentesque laoreet lectus pulvinar ullamcorper. Phasellus faucibus risus ut augue rutrum,
et tempor urna dictum. Fusce id lacus urna. Etiam malesuada at ex a aliquet. Phasellus mollis mi non urna tristique, et vestibulum libero commodo. Phasellus tempor tellus at arcu tempor gravida.
</p>
<p>
Praesent laoreet tellus tempus orci sodales aliquet. Pellentesque aliquam faucibus quam, id aliquam velit condimentum vel. Etiam convallis leo at felis varius, vitae consectetur erat varius. Nullam ante nisl, sollicitudin non ornare sed, interdum ac nibh.
Curabitur sed vehicula dolor. Vivamus convallis arcu vel fermentum volutpat. Ut metus lacus, molestie sed condimentum ac, scelerisque vel neque. Pellentesque sed aliquam magna. Curabitur tempor ultrices magna eu ullamcorper. Vivamus ut nulla
in elit rhoncus finibus. Duis tristique tellus sit amet odio cursus, nec dignissim lacus euismod. Aliquam erat volutpat. Maecenas id mi imperdiet, maximus dolor in, feugiat metus. Donec mauris velit, euismod nec tellus sed, blandit facilisis
sem. Nulla facilisi.
</p>
<p>
Aenean augue felis, feugiat quis auctor ac, ultricies pellentesque justo. Proin ultricies id ante vitae porttitor. Proin porttitor lacinia erat. Donec eleifend condimentum justo, at tincidunt est. Quisque fringilla sollicitudin nisi, eget rhoncus sem
tincidunt in. Quisque faucibus placerat arcu et tempus. Duis sodales tincidunt lorem, at suscipit ex maximus ut. Donec efficitur diam et dui pharetra, quis condimentum ante iaculis.
</p>
<p>
Aliquam quis massa ex. Donec auctor dui quis est sodales fermentum. Aliquam nulla diam, venenatis maximus dui id, ultricies posuere risus. Nullam auctor rhoncus nibh at malesuada. Aenean at hendrerit orci, sed pellentesque metus. Maecenas porta ante sapien,
sit amet sollicitudin augue volutpat eu. In placerat ornare lorem, vel ullamcorper felis imperdiet sed. Ut pharetra luctus orci porttitor vestibulum. Morbi eu tortor at enim ornare rhoncus. Ut vitae enim posuere, tristique risus et, tempor orci.
Nam varius tellus eu magna scelerisque dignissim. Nunc auctor ligula in efficitur convallis. Nullam sed ligula enim. Nam ipsum ante, convallis vel malesuada at, congue ac tortor.
</p>
<p>
Vivamus gravida, magna eget lacinia consequat, quam libero feugiat quam, sit amet euismod lorem velit et nisi. Suspendisse ac pharetra dui. Nam venenatis viverra felis, id auctor nisl convallis id. Nunc dignissim rutrum nulla vel fermentum. Sed sagittis
gravida nibh ut facilisis. Curabitur quis faucibus arcu. Sed maximus tincidunt mattis. Suspendisse accumsan neque nec lorem consectetur fringilla. Nulla porta ante massa, quis sagittis sem mattis vel. Sed vitae nibh tincidunt, vehicula dolor
et, cursus sem.
</p>
<a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
Related
Is there a way to make all links within a page scroll smoothly via CSS and as a fallback JavaScript (but only as last resort).
I've seen this answer but it uses jQuery and JavaScript.
I'd prefer a pure CSS solution, something like:
link {
scrolling: smooth;
}
Use CSS scroll-behaviour (may not be supported on some browsers):
html {
scroll-behavior: smooth;
}
Last paragraph
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit erat id ex luctus facilisis et vitae enim. Vestibulum congue gravida quam, in mollis arcu varius in. Mauris imperdiet malesuada velit, id cursus eros vulputate nec. Sed congue sollicitudin nulla eget luctus. Integer ut quam a diam pellentesque ultrices quis a ligula. Quisque sed lorem suscipit, pulvinar risus nec, molestie est. Aliquam scelerisque scelerisque massa et scelerisque. Quisque leo urna, pharetra in sapien quis, lacinia dapibus nulla. Donec dignissim semper magna, sed fermentum quam luctus sed.
In venenatis dui sed condimentum varius. Ut sit amet semper elit, sit amet vulputate augue. Nulla facilisi. Donec sed consectetur dolor, at molestie tortor. Nulla facilisi. Proin scelerisque a nulla sodales efficitur. Praesent turpis erat, vestibulum vel efficitur id, porttitor vel arcu. Maecenas ex mauris, molestie nec nisi id, aliquet mattis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie, leo in aliquet pretium, metus dolor congue ligula, sed porta arcu tortor at elit. Vivamus dapibus mauris venenatis enim finibus tempor.
Vivamus ultrices nibh pellentesque laoreet condimentum. Curabitur rutrum eget odio eget consequat. Ut vel lorem ullamcorper, congue tellus non, convallis felis. Integer vulputate blandit elementum. Praesent dapibus malesuada enim, nec suscipit nulla laoreet a. Nunc mauris purus, vestibulum vel nisl bibendum, pretium venenatis erat. Nulla ut orci sit amet neque fringilla tempus.
Aenean vel sodales metus. Sed tincidunt risus quam, non maximus mi dictum vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Pellentesque sollicitudin vulputate diam, non dignissim enim mattis blandit. In a scelerisque tellus. Nulla et urna varius, sodales nulla et, posuere justo. Vivamus in pharetra nibh. In vestibulum ante eget lacinia tincidunt. Aenean dignissim mauris in lacus vehicula, eu ultricies erat tristique. Ut nulla odio, venenatis vitae ornare quis, elementum non erat. Proin tristique massa id aliquet posuere.
Nam vitae eros non ante luctus volutpat ut eget est. Nulla pharetra odio nisl, at ultrices orci congue quis. Aliquam quis sem sed ligula tincidunt posuere quis sit amet nibh. Aenean arcu sapien, blandit in tristique vel, placerat vitae mauris. Mauris et mauris massa. Vivamus at nisl dictum, facilisis ligula ut, pharetra elit. Morbi scelerisque diam in diam posuere, id tempus ex ultrices. Praesent dictum ipsum in urna vehicula congue. Praesent lobortis lorem mauris, ut interdum risus convallis sit amet. Fusce vitae ultrices nunc. Integer at quam nibh. Praesent aliquet rutrum nisl sit amet interdum. Donec sodales metus vel lectus gravida ornare.
Nulla non augue efficitur, molestie neque ut, euismod augue. Sed nulla est, faucibus et augue eu, sodales finibus ante. Curabitur ex elit, laoreet nec porta vitae, rutrum vitae purus. Sed semper finibus pellentesque. Maecenas vel metus risus. Curabitur ut arcu cursus, dapibus velit varius, interdum massa. Donec aliquam libero at elit interdum hendrerit. Vivamus elementum quam ac porttitor euismod. Praesent ipsum elit, fringilla vel pharetra in, fringilla id tellus. Suspendisse et justo mattis tellus mollis suscipit eget quis ex. Proin sed faucibus mi. Maecenas viverra felis eget leo pharetra, non volutpat sem fermentum. Cras tincidunt ipsum non euismod elementum. Morbi in varius arcu, sit amet facilisis ipsum. Donec a justo a mauris tempus pharetra. Fusce suscipit ornare libero, consequat hendrerit nisi mattis sit amet.
Duis pulvinar justo non tellus lobortis, eu posuere orci rutrum. Praesent dignissim scelerisque enim, et mattis turpis sollicitudin sagittis. Fusce sodales nulla eu ex blandit, ac commodo quam ornare. Etiam in erat nisi. Duis porttitor hendrerit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at egestas mauris. Vivamus eleifend nulla facilisis augue porttitor, in sagittis enim gravida. Quisque eget magna a libero vulputate malesuada. Morbi sapien urna, mattis sit amet tellus quis, laoreet feugiat ipsum. Nullam vel augue vel orci convallis congue id sed ex. Proin luctus id elit et suscipit. Vestibulum ac mattis odio.
Donec velit sapien, mollis at vestibulum ut, venenatis non lectus. Nulla facilisi. Fusce sagittis elit commodo bibendum posuere. Nullam vitae nunc vestibulum, tempor erat quis, sagittis eros. Suspendisse lobortis nec leo in auctor. Donec sit amet purus ac ante imperdiet placerat non non lectus. Integer a massa sed ipsum congue faucibus. Integer erat dolor, maximus sed est non, tincidunt blandit nunc. In lobortis elit at mi molestie tempor.
Phasellus lacinia erat sit amet enim condimentum, vitae accumsan magna tincidunt. Integer imperdiet malesuada leo. Integer et mi ipsum. Proin nulla turpis, auctor in commodo ut, fermentum vitae risus. Morbi consequat ipsum libero, id finibus ante placerat id. Proin elementum luctus nunc id tristique. Proin tellus mauris, eleifend vitae hendrerit eget, varius vel ante. Ut dignissim metus at fermentum laoreet. Phasellus eu vestibulum mi, et tristique orci. Sed pulvinar porta commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id odio non purus suscipit congue vel ut nunc. Morbi porttitor sed ligula ac vehicula. In fermentum ipsum sit amet lacinia pharetra. Nunc sed neque vel mauris ultrices rhoncus.
<span id="last">In auctor in leo nec sollicitudin. Nam viverra lectus nibh, semper lacinia diam tristique ac. Vestibulum id mauris ac dui accumsan tempus. Donec feugiat augue sed felis facilisis porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet auctor dui ut porta. Nullam fringilla mollis eros et ultricies. Maecenas cursus enim posuere sapien interdum sollicitudin. Aenean hendrerit nunc risus, sed rhoncus nisi tempus ut.</span></p>
I am trying to add a help box at the right hand side of my page. I want it to stay in the same place as the user scrolls and I want it to collapse to a tab at the right hand side, when they close it.
A bit like this:
https://www.elated.com/articles/css3-floating-follow-tab-with-rollover-effects/
but it needs to expand and collapse.
I can't see any examples of how to do this anywhere.
I'm sure you'll find much better implementations of this, however this is one way to do it. I just threw it together, I would google around to find something that may be a bit better but this should give you an idea of how it could be done.
Note this is with a jquery library you could use vanilla javascript as well. In order to have something happen on click you will need to use javascript. If you want it to happen on hover this can be done with just css.
$(document).ready(function(){
$(document).on('click', "#helpbar span", function(){
if($(this).parent().hasClass('closed')){
$(this).parent().removeClass('closed').addClass('open');
$(this).find('p').text('CLOSE');
}else if($(this).parent().hasClass('open')){
$(this).parent().removeClass('open').addClass('closed');
$(this).find('p').text('HELP');
}
});
});
#content{width:400px;}
.closed{
width:0px;
}
.open{
width:200px;
}
#helpbar{
position: fixed;
right:0;
height:500px;
border:1px solid black;
top: 50px;
}
#helpbar span{
width:100px;
height: 100px;
margin-left:-100px;
border:1px solid black;
display:inline-block;
}
#helpbar span p{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel dui eget viverra. Aliquam ac hendrerit ex, pulvinar dictum nisl. Quisque vitae ullamcorper augue. Donec congue rhoncus augue, eu faucibus erat bibendum a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vehicula ex ut arcu convallis molestie. Nunc sed mi eget purus aliquet consectetur in eget ex. Cras commodo arcu augue. Duis at nulla ligula. Donec id erat non ante viverra sollicitudin sodales vitae velit. Mauris vitae fermentum nulla, eget laoreet erat. Donec in eleifend ligula. Phasellus in pretium enim. Vestibulum ultricies ligula arcu, sed faucibus risus vulputate vitae.
Integer ut erat magna. Sed imperdiet est vitae est rhoncus lacinia. Proin molestie tristique neque ut condimentum. Duis consectetur varius aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam at iaculis ipsum. Integer enim lacus, suscipit mollis consequat nec, lobortis sed magna. Cras ut ultricies arcu. Nulla aliquam magna nulla, ac venenatis nibh tincidunt in. Nulla tristique mauris orci, et sagittis dolor volutpat ut. Aliquam erat volutpat. Nam lectus magna, bibendum eu mauris in, lobortis dictum ipsum. Donec molestie imperdiet feugiat. Pellentesque consequat laoreet ipsum, ac rutrum nunc tempus sit amet. Integer et cursus ex.
Morbi suscipit vitae leo ut consectetur. Maecenas vehicula libero ante, et pharetra ligula varius sed. Integer in lacinia augue. Cras tincidunt justo metus, vitae laoreet orci sollicitudin et. Quisque eu lobortis nisi, vel congue purus. Maecenas malesuada feugiat euismod. Etiam eu justo sed orci semper elementum. Cras et enim gravida, cursus sapien in, consectetur ante. Praesent maximus semper convallis. Praesent sit amet massa sagittis, interdum elit pulvinar, varius erat. Vestibulum ornare, ex id porttitor luctus, odio turpis imperdiet lectus, ac vulputate ipsum metus a dolor. Curabitur et leo nunc. Quisque in nulla ac lectus tempor tempus in quis ipsum.
Cras turpis lectus, volutpat vitae hendrerit vel, sollicitudin sed massa. Suspendisse non sagittis turpis. Quisque a lacus quam. Aenean laoreet lorem at ante viverra viverra. Duis volutpat eros a lacus posuere, non faucibus massa ultrices. Ut imperdiet mi in neque porttitor finibus ac eget arcu. Aliquam quis pharetra nibh, non sagittis neque. Curabitur arcu mauris, euismod ut libero ac, facilisis malesuada sapien. Maecenas ex lectus, suscipit eget nulla molestie, placerat varius leo. Pellentesque eu sapien fringilla, blandit nisi hendrerit, lobortis nunc. Cras ac felis ullamcorper, suscipit metus nec, semper diam. Vivamus quis mauris eget metus condimentum luctus eu non est.
In viverra turpis lacus, id porttitor nibh aliquam euismod. Sed a massa dolor. Aliquam ut commodo quam. Mauris a rutrum quam, non convallis enim. Suspendisse non turpis ultrices, congue nisl eu, fringilla mauris. Donec sed libero felis. Morbi vel lorem nibh. Pellentesque vitae accumsan nisi. Vivamus ut nulla sapien. Donec at diam laoreet mauris gravida mollis. Nullam tortor ante, auctor dignissim molestie ut, tempor nec urna. Vestibulum suscipit ultrices turpis vel tristique. Curabitur fringilla magna vel tortor finibus, ac commodo ipsum accumsan. In rhoncus eleifend enim, eu malesuada ex laoreet ut. Integer elementum sem sed aliquet gravida. Aenean auctor a justo vel ultrices.
Proin accumsan, ex eget hendrerit sodales, urna leo auctor nunc, sed imperdiet tellus sem nec sem. Proin vitae enim ut ipsum blandit dapibus. Fusce tellus tortor, ultricies vel lobortis et, iaculis ut massa. Quisque ullamcorper nulla urna, sit amet sodales risus facilisis a. Nulla in augue at urna pulvinar iaculis a ut nibh. Mauris ornare magna et gravida mattis. Maecenas euismod semper dictum. Maecenas nec risus justo. Proin id iaculis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum vestibulum dui et pellentesque. Duis gravida risus rhoncus, dapibus orci a, finibus leo. Vestibulum maximus sagittis nibh non lacinia.
Nulla sodales odio at orci lobortis luctus. Nulla condimentum a libero at ullamcorper. Etiam in tincidunt ex. Donec non dolor nec augue tincidunt pretium vitae a odio. Aenean fringilla massa erat, in molestie mauris tincidunt eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tincidunt turpis eu justo condimentum fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce mi mauris, ullamcorper at euismod a, mattis et purus.
Proin pharetra arcu ut maximus condimentum. Nullam sit amet vestibulum massa, at vulputate ipsum. Curabitur pretium ultrices sem. Pellentesque ullamcorper orci quis nisi finibus posuere. Aliquam erat volutpat. Donec porttitor justo eget mi lobortis, iaculis gravida libero gravida. Donec in tempus nulla.
Curabitur suscipit ligula sit amet mi pharetra ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Duis quis lectus vitae arcu mattis fermentum at non lacus. Praesent ullamcorper nibh eu ante aliquam, sed fringilla tellus vehicula. Praesent ut mollis risus. Nullam nec dictum orci. Nullam egestas, erat eget vestibulum viverra, felis arcu facilisis massa, ac rutrum tortor est vel libero. Sed fermentum lacus sed massa pellentesque, a ornare orci interdum. Morbi in turpis risus. Donec ullamcorper, quam et blandit varius, quam lorem vulputate turpis, in viverra lectus tortor efficitur ipsum. Suspendisse dictum convallis est, quis bibendum dolor aliquam ut. Aenean hendrerit sapien fermentum dapibus gravida. Morbi eu pulvinar urna. Morbi scelerisque fermentum luctus. Sed ac tortor bibendum, pretium dui tempor, facilisis risus.
Mauris a lorem tristique, euismod lorem quis, varius risus. Donec bibendum nisi sit amet lorem auctor tempus. Nullam maximus erat quis lacus tristique, non aliquet neque semper. Aliquam erat volutpat. Duis elementum, dui in euismod fermentum, mi nisi suscipit erat, vel tincidunt neque felis id felis. Suspendisse tempor mi quam, sed posuere nisl fringilla vel. Mauris vitae diam vehicula urna feugiat facilisis cursus sed ligula. Cras iaculis luctus nisi, quis dictum lacus venenatis ut. Nulla facilisi. Phasellus sit amet lacus diam.
Duis sem libero, pellentesque sed porta hendrerit, elementum commodo dui. Suspendisse felis metus, semper at urna sed, egestas ullamcorper dolor. Fusce eleifend, libero nec euismod posuere, sapien dui maximus est, ut congue lacus diam sed mi. In vitae est sed augue sodales pharetra. Donec sit amet sem magna. Integer ultricies in leo ut mollis. Vestibulum mattis varius erat, sed tempus augue finibus et. Donec feugiat accumsan diam eu efficitur. Nulla eu enim nec urna vehicula vehicula ac euismod dolor. Ut lacinia elit eget aliquam laoreet. Nullam dapibus imperdiet sem et pharetra. Nulla sed quam id turpis porta varius. Mauris dictum a tortor cursus scelerisque. Morbi eu mattis ante. Vestibulum efficitur accumsan diam et ultricies. Nullam pharetra nulla ut augue gravida, sed tincidunt dolor porttitor.
Sed molestie, massa sed mattis tincidunt, sapien velit bibendum lorem, in feugiat risus dui eu mauris. Quisque iaculis laoreet tellus, eget fringilla neque tincidunt et. Fusce metus tellus, euismod nec ornare nec, eleifend vel nunc. Donec et aliquet metus, sed tristique est. Mauris non aliquet urna, eget rutrum enim. Etiam posuere felis eget lacus pellentesque, ut dapibus dui vehicula. Proin vel fermentum ligula. Suspendisse accumsan a velit lacinia mollis. Fusce imperdiet id nisi quis maximus. Curabitur convallis eros nec hendrerit volutpat. Suspendisse vestibulum nibh urna, sed cursus odio euismod vitae. Morbi ornare tempor eros ut scelerisque.</p>
<div id="helpbar" class="closed">
<span><p>HELP</p></span>
<div>
<p>This is where the help is</p>
</div>
</div>
</div>
Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.
Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
The nav sticky at the top of the page without scrolling.
It happens only in Safari browser.
Demo http://codepen.io/anon/pen/PGqxKa
$("#myNav").affix({
offset: {
top: 0
}
});
.jumbotron {
margin-bottom: 0;
}
.navbar {
border-radius: 0;
}
.navbar.affix {
top: 0;
z-index: 9999;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div data-spy="scroll" data-target="#myNav">
<div class="header">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Bootstrap Affix</h1>
</div>
</div>
</div>
</div>
</div>
<nav id="myNav" class="navbar navbar-inverse" data-spy="affix">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section One
</li>
<li>Section Two
</li>
<li>Section Three
</li>
<li>Section Four
</li>
<li>Section Five
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 id="section-1">Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet
quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id="section-2">Section Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis
enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis
urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit
non sapien in, mollis ornare augue.</p>
<hr>
<h2 id="section-3">Section Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar
purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem
elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
<hr>
<h2 id="section-4">Section Four</h2>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum
purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum
sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam,
lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet,
quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p>
<hr>
<h2 id="section-5">Section Five</h2>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu
non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
<p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas
ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis
ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt
vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque
vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
</div>
</div>
</div>
</div>
Add Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { to the affix.js
Affix.prototype.getState = function(scrollHeight, height, offsetTop, offsetBottom) {
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var targetHeight = this.$target.height()
// added line 👇
if (scrollTop < 0) {
return 'bottom';
}
------------------------------------------
------------------------------
------------------
}
The scriptaculous shaking effect somehow produce some bugs for Webkit browsers, including Chrome and Safari. When shaking, the element will shift to the top left of the screen covering everything. An example code is given as below, are there any ways of solving this?
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects'></script>
</head>
<body>
<div style="z-index: 20000; position: fixed; display: block; bottom: 10px; right: 10px; background-attachment: scroll; background-color: white;" id="floating_text">
<p>This should be some floating text.</p>
<p>Some more floating text.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ligula, tempus adipiscing posuere id, sollicitudin sed nulla. Sed neque diam, volutpat non interdum vel, pellentesque vitae lorem. Vivamus et leo risus. Fusce at nunc nulla, non ultricies elit. Aliquam erat volutpat. Aliquam pulvinar mi at purus laoreet eu varius nisl laoreet. Mauris lobortis sapien diam. Maecenas arcu est, ullamcorper fringilla placerat nec, semper ut arcu. Curabitur metus nisl, ornare nec posuere at, tincidunt tempor nisi. Ut ut est risus. Curabitur elit urna, sagittis sagittis cursus quis, accumsan eget nulla. Donec odio ante, rutrum at fermentum vel, tempus gravida odio. Quisque a ante a urna vehicula posuere ac ut orci. Integer luctus sem et justo condimentum consequat. Phasellus pharetra malesuada velit, et commodo arcu imperdiet vitae. Suspendisse vitae risus orci. Maecenas massa tortor, sodales ut luctus ac, lacinia vitae sapien. Vestibulum sit amet rutrum est. Nullam magna erat, semper a volutpat id, porta sed nisl.</p>
<p>Praesent nec consectetur sapien. Integer mollis libero a odio pharetra vulputate. Donec mattis consequat arcu, vel ultricies orci imperdiet sit amet. Mauris sit amet tellus libero. Morbi ac venenatis ligula. Cras tellus neque, porttitor sit amet hendrerit nec, ornare quis tellus. Nam iaculis mi at mi bibendum at commodo justo pretium. Ut in nibh non diam hendrerit fermentum a ut odio. Curabitur lorem turpis, tincidunt et rhoncus et, pulvinar a metus. Vestibulum a quam sit amet arcu condimentum cursus vitae feugiat lectus. Sed ut lorem tellus, non sagittis enim. Curabitur lectus eros, commodo a elementum et, molestie eget est. Donec ullamcorper, arcu nec volutpat auctor, sem odio interdum tellus, nec volutpat lacus libero at nisl. Aliquam metus sapien, aliquam a rutrum ac, tincidunt at purus. Donec in erat mi. Quisque semper mauris in massa bibendum sed tincidunt augue facilisis. In tempus lacinia urna ac tristique.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique urna sem. Etiam iaculis aliquam dui nec porta. Proin tristique diam non augue mattis tristique. Phasellus nulla erat, adipiscing sed cursus sed, pulvinar eget nisl. Maecenas blandit nibh eu nisl facilisis et semper turpis posuere. Pellentesque auctor sem in massa sollicitudin congue. Vivamus quis lacinia massa. Aliquam sodales dictum magna, eget ullamcorper eros placerat at. Quisque gravida diam sit amet nunc porta aliquam. Ut quis aliquet est. Maecenas risus tellus, euismod id porttitor at, porta id turpis. Phasellus id molestie ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean purus nibh, egestas vestibulum aliquet eget, luctus nec eros. Nulla facilisi. Quisque molestie, sem interdum posuere lacinia, nisl purus ornare lectus, id dapibus lacus dolor in ipsum. Aenean pharetra leo nulla.</p>
<p>Curabitur nisi quam, iaculis eget pellentesque vel, pretium sed massa. In viverra, tellus at sollicitudin fringilla, orci eros blandit elit, a bibendum mauris dolor ut metus. Vivamus pellentesque suscipit diam, vitae euismod mi pellentesque vitae. Nullam neque libero, vehicula ut iaculis at, tincidunt eget leo. Suspendisse vitae velit justo. Nullam vitae sem tincidunt nulla tincidunt mollis in id massa. Duis rhoncus elementum turpis quis mollis. Vivamus egestas urna in velit commodo iaculis. Aenean quis dolor eu odio porttitor rhoncus nec vel eros. Donec ut est eu nisl vehicula pulvinar et id dolor. Donec a dolor neque. Morbi tempus mattis tortor ut rutrum. Phasellus orci metus, pellentesque vel tincidunt nec, pulvinar eu ante. Duis faucibus felis et diam ullamcorper in feugiat urna dignissim. Quisque nec diam mauris, vel viverra arcu. Cras sagittis dignissim nisl in sagittis. Fusce venenatis rhoncus est, nec elementum libero dapibus eget. Donec eu velit metus. Sed sollicitudin felis a diam condimentum in suscipit neque varius. Nulla nec tortor tristique elit malesuada luctus luctus quis leo.</p>
<p>Nullam at quam dui. Ut gravida, tellus malesuada faucibus gravida, purus nulla consequat lorem, pellentesque egestas justo quam et enim. Suspendisse fringilla tellus id odio tristique varius. Cras et metus elit. Etiam interdum adipiscing mollis. Aliquam aliquet vestibulum imperdiet. In consectetur, nunc cursus sodales scelerisque, tellus eros tristique nisl, ut luctus augue dolor vel nibh. Fusce eget dui sed eros tristique varius lacinia id sapien. Nullam ac lorem ac lacus cursus ultricies id a risus. Ut eget dolor sem. Aliquam euismod consequat euismod. Duis sit amet neque et massa ullamcorper tempor.</p>
<p>Quisque rutrum, ipsum ac volutpat dictum, urna diam facilisis enim, ac vestibulum justo metus eu mi. Curabitur nunc sem, consequat a mollis non, bibendum vitae dolor. Mauris pulvinar pellentesque tellus, vel aliquet mauris vulputate vel. Morbi eu ante id nulla ultricies tincidunt. Proin porta, felis nec tincidunt iaculis, justo nibh laoreet dolor, eu sollicitudin arcu justo et odio. Sed suscipit tellus lobortis est tristique semper fermentum magna laoreet. Sed eget ante nunc, vitae varius purus. Mauris nec viverra neque. Morbi et lectus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lobortis magna.</p>
<p>Phasellus elementum iaculis sem in consectetur. Curabitur nec dictum enim. Nunc at pellentesque augue. Nulla sit amet sapien neque, et molestie augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin non elit ante. Mauris justo tellus, feugiat at dapibus a, placerat id felis. Nullam lobortis vehicula rutrum. Fusce tristique pharetra urna, ac scelerisque ipsum consequat eget. Morbi at ipsum in tellus luctus volutpat. Duis placerat accumsan lacus, dictum convallis elit porttitor eu.</p>
<p>Sed ac neque sit amet neque luctus rhoncus. Vestibulum sit amet commodo ante. Duis ullamcorper est id dui ullamcorper cursus. Maecenas fringilla ultricies turpis, nec pulvinar libero faucibus a. Quisque bibendum aliquam sapien, in fermentum arcu iaculis at. Mauris bibendum, metus sed rhoncus fringilla, nisl purus interdum eros, vitae malesuada felis est rhoncus magna. Phasellus elit justo, sagittis nec interdum tincidunt, mollis quis justo. Suspendisse rhoncus rutrum vestibulum. Aliquam ut nunc lectus, quis aliquam risus. Aliquam vel nulla sed odio blandit sagittis. Nulla facilisi. Vivamus ullamcorper, lectus facilisis eleifend accumsan, purus massa sollicitudin nunc, in sodales tellus dui eget est. Morbi ipsum nisi, semper sit amet vehicula sit amet, semper at mauris. Nam mollis massa sed risus scelerisque quis congue mauris tempus. Vestibulum nec urna magna, vitae ornare massa. Aenean adipiscing tempor rutrum.</p>
<p>In hac habitasse platea dictumst. Etiam in dolor eros, eleifend volutpat magna. Sed blandit gravida feugiat. Sed eu dolor in odio sagittis molestie eget ac orci. Phasellus tellus erat, scelerisque tincidunt lacinia sed, placerat eu sapien. Curabitur lobortis feugiat cursus. Nam eu egestas justo. Nullam dignissim enim ipsum, sed semper orci. Donec nulla dui, viverra vel viverra eu, eleifend nec justo. Sed in ultricies turpis. Maecenas ullamcorper, erat ac scelerisque mattis, augue magna laoreet mauris, nec sagittis tellus enim eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum urna eu magna ultricies adipiscing. Phasellus sed urna at nibh euismod vestibulum at eget dui. Nulla ullamcorper viverra tellus ut volutpat. Praesent hendrerit, purus a imperdiet tempus, turpis est suscipit felis, ut commodo diam orci ac augue. Quisque consectetur varius sapien, vel lobortis ante porttitor sit amet. Proin fermentum blandit justo, id faucibus elit feugiat ut. Nulla quam elit, tristique gravida ultrices in, imperdiet et enim.</p>
<p>Aliquam malesuada, nibh eget laoreet malesuada, lorem ligula gravida eros, a consectetur dui odio id urna. Vivamus tincidunt porttitor facilisis. Maecenas vitae lacus at lorem porttitor sodales. Duis et velit ac ipsum cursus ornare. Aliquam eu rhoncus est. Cras nec facilisis tellus. Nunc in felis odio. Nam facilisis dui eu lacus egestas sit amet malesuada dolor volutpat. In placerat dictum turpis ac vulputate. Suspendisse neque odio, elementum sagittis sollicitudin quis, eleifend ac orci. Proin suscipit molestie orci non venenatis. Sed metus mauris, laoreet id lobortis at, tempor eu erat. Mauris tempor, nisi id interdum tempor, tellus ligula pretium mi, a viverra nibh neque vitae est. Integer mattis, lorem ac congue fermentum, quam ipsum gravida erat, in egestas lorem eros ac massa. Vestibulum lobortis ante libero, vel fermentum ante. Aliquam augue ipsum, ullamcorper sit amet dictum id, commodo sit amet lacus. Vivamus elit purus, elementum a vestibulum quis, iaculis id metus. Cras facilisis orci in nulla consequat gravida. Integer blandit, felis at lacinia porta, lacus velit pretium magna, ut eleifend diam magna a justo. Donec scelerisque diam quis nisi molestie vel egestas urna condimentum. </p>
<script type="text/javascript">
Effect.Shake('floating_text');
</script>
</body>
</html>
The DIV takes 100% of the screen once it is "absolutized" by the animation function. If you supply a height and width to "floating_text", it works fine.