Related
I'm working on creating a two-column website; the two columns scroll independently. I need the footer to be hidden when the user scrolls down and to appear again once the user scrolls back up. I'm new to Javascript and I recently learned how to do this with a site that scrolls as a whole. I've already browsed through questions of that nature here too, however I'm having trouble trying to apply that to the independent columns. I got the footer to hide on scroll down of the left column, but I can't get it to reappear when scrolling up. I've put together an example of what I have. Any help would be much appreciated.
var prevScrollpos = document.getElementById("left").pageYOffset;
document.getElementById("left").onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}
body {
margin: 0;
background-color: darkgreen;
font-family: Arial, Helvetica, sans-serif;
border-top: 9px solid #f8f25c;
}
p{
padding: 10px 20px 10px 25px;
}
#content, html, body {
height: 99%;
}
#left {
float: left;
width: 50%;
background: #fdfef9;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: #4668ff;
height: 100%;
overflow: scroll;
}
#navbar {
background-color: orangered;
position: fixed;
bottom: 0;
width: 100%;
display: block;
transition: bottom 0.3s;
}
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
text-decoration: underline;
color: black;
}
<body>
<div id="navbar">
Home
Services
Contact
</div>
<div id="content">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
</div>
</body>
Please try this:
var prevScrollpos = document.getElementById("left").scrollTop;
document.getElementById("left").onscroll = function () {
var currentScrollPos = document.getElementById("left").scrollTop;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}
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 focus on an html element in a contenteditable div that is overflowing the viewport.
Any ideas?
Here is what I have tried so far
https://jsfiddle.net/pu8rvqex/3/
$(document).ready(function () {
$('.test_mark').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div autofocus class="col-md-12 sol-sm-12 form-control" contenteditable="true" style="height:auto !important">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
<span id="#test_mark" class="test_mark">do not like</span>
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
</div>
</div>
The solution is to set contenteditable="true" to the span .test_mark and wrap it in another <span> with contenteditable="false"
JSFIDDLE
Hope this helps.
I tried focusing to
an element
the caret
but I couldn't
Here is what I tried
http://jsfiddle.net/vXnCM/7779/
expected behavior: the view should scroll to the top after clicking on focus button at the very bottom.
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
<span id="#test_mark" class="test_mark">do not like</span>
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
</div>
<button id="button" onclick="setCaret()">focus</button>
You may wrap the document.getElementById("button").focus(); in a document.ready function. And also should call the el.focus(); before the dom manipulations.
JSFIDDLE
Hope this helps.
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>