We Keep Coding

How to add read more/less in dynamic called texts - javascript

I usually call my each posts description in Laravel using
$postDescr.
<div> {{$postDescr}} </div>
I want to add Read More... after 500 string counts, if count is more than 500 and when I click Read More... it shows the remaining part of Description. And Read Less... to revert to initial state

Read the string into a JavaScript variable. Initially show the short string and a button. On button press show the whole string. On the next button press show the short string.
const span = document.querySelector('span');
const text = span.innerText;
span.innerText = text.substring(0, 500);
let showAll = false;
const button = document.querySelector('button');
button.addEventListener('click', () => {
showAll = !showAll;
span.innerText = showAll ? text : text.substring(0, 500);
button.innerText = showAll ? 'Read less' : 'Read more';
});
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna. Phasellus in dui eget purus rhoncus sodales. Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. In sed purus venenatis, porttitor mi sed, porta leo. Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. Aenean arcu justo, convallis ullamcorper ante at, commodo elementum mi.
Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. Aenean suscipit lacinia libero sed varius. Sed quis convallis neque. Praesent quis nisi eu justo porta consectetur. Mauris ligula orci, ultricies quis mattis eu, viverra ut libero. Vivamus scelerisque porttitor imperdiet.
Vestibulum ipsum enim, vulputate ut libero nec, molestie placerat augue. Proin eleifend eros massa, sed convallis augue pharetra condimentum. Vestibulum auctor sem porttitor sollicitudin malesuada. Sed eget tortor ultrices, mattis lorem ac, semper tellus. Suspendisse vel quam nisi. Phasellus tincidunt nisi ut urna eleifend, at vehicula turpis ornare. Nullam viverra est at diam volutpat, nec lacinia orci malesuada. Phasellus tincidunt est sem, quis blandit orci congue sit amet. Pellentesque et sollicitudin ante. Nullam in lacus vel nunc dictum viverra eget et ex. Pellentesque sit amet dui laoreet, vulputate est eget, molestie velit. Nam eu mi eleifend, aliquam velit quis, dignissim metus.
Praesent varius quis mauris pharetra pulvinar. Phasellus tempus nulla non quam faucibus, non pulvinar nulla aliquet. Quisque tempor risus ante, nec porta metus consequat non. Ut et leo odio. In fringilla quam lorem, vel ornare diam hendrerit id. Ut vel arcu sed justo venenatis pretium. Donec ante nibh, scelerisque at vulputate a, pulvinar eget purus. Nam pharetra hendrerit faucibus. Quisque quis iaculis lacus. Aenean mollis pretium metus, vestibulum viverra mi hendrerit a.
Quisque a sem ut nisl interdum efficitur. Maecenas id vehicula purus, ac tempus felis. Sed tincidunt ligula in odio tempor volutpat. Cras dictum ex vitae viverra posuere. Pellentesque eleifend ac leo non dignissim. Mauris volutpat, arcu a pulvinar venenatis, dui tortor porttitor sem, eu congue diam ex quis nibh. Aenean feugiat egestas neque, non laoreet orci fermentum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Phasellus sodales, dolor vitae pharetra gravida, mi erat laoreet quam, et porta velit massa et lectus. Sed mattis cursus nibh. Integer eget ligula interdum est ultrices semper. Fusce eget velit molestie, euismod arcu eget, imperdiet erat. Vivamus in eros velit. Curabitur nec dictum arcu.
Nunc ornare, enim vitae ullamcorper interdum, purus felis congue nibh, sed mattis diam lorem bibendum quam. Nunc sodales varius libero, vitae venenatis libero porta at. Praesent nec enim diam. Phasellus a turpis non odio interdum consectetur. In vitae dolor eget neque mollis venenatis id ac leo. Morbi hendrerit commodo dui, at tristique turpis pellentesque non. Integer aliquet a risus sit amet interdum. Nullam pharetra elementum augue id dictum. Curabitur elementum vehicula velit quis iaculis. Ut convallis consequat nisi, vitae tempus velit tempus id. Aliquam placerat, diam sed pulvinar faucibus, neque est mattis mauris, vel interdum tellus diam quis augue. Vestibulum quis porta dolor. Vivamus porta tristique libero.
Aenean vulputate posuere ipsum, a ornare augue viverra a. Duis semper purus lectus, in dignissim elit maximus a. In hac habitasse platea dictumst. Donec mollis tortor vel nibh elementum consectetur. Duis vel turpis nibh. Integer eget arcu in velit luctus vehicula. Suspendisse pretium felis vitae nulla mollis, ut feugiat velit gravida.
Integer condimentum diam at ipsum posuere, sit amet varius enim pretium. Nulla porttitor vitae velit vel tincidunt. Sed facilisis tempus condimentum. Suspendisse laoreet magna ut quam tincidunt semper. Mauris in urna imperdiet, tristique augue et, elementum sapien. Nullam ullamcorper suscipit massa, non feugiat nibh dictum et. Nulla risus lorem, dictum vitae libero sodales, auctor sodales justo.
Cras ligula justo, sagittis a pretium at, pellentesque et tortor. Maecenas iaculis varius tortor, in sagittis neque sodales quis. Donec aliquet lorem justo. Ut sed ligula quis metus tempus lacinia. Vivamus ut lobortis velit. Pellentesque suscipit commodo rutrum. Aenean laoreet rhoncus rhoncus. Ut ullamcorper in nisi non tempus. Aliquam eget scelerisque elit. Pellentesque rutrum sapien in lobortis placerat. Suspendisse quis urna eget turpis feugiat ornare. Quisque a enim id lacus ullamcorper feugiat. Nam egestas quam malesuada diam dictum, ut maximus arcu pharetra. Maecenas ultrices nibh lectus, vitae hendrerit est bibendum in.
Ut augue tellus, mollis ac dolor id, bibendum pulvinar purus. Ut fermentum luctus tempor. Maecenas imperdiet mi dui.</span>
<button>
Read more
</button>

Related

I want to add multiple read more links to continue reading after a limited amount of text like 1000 words or 2 paragraphs
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' read more...');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
<style>
.show-read-more .more-text{
display: none;
}
</style>
</head>
<body>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p>Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis.</p>
<p>Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

Here is a working version
$(function() {
$(".show-read-more").each(function() {
const text = this.textContent;
const newHtml = text.match(/.{1,300}/g).map((str, i) => `<span class="more-text" hidden>${str} read more...</span>`);
$(this).html(newHtml);
$(this).find("span").eq(0).show(); // show the first
$(this).find("span a").last().remove(); // delete the last link
});
$(".show-read-more").on("click", ".read-more", function(e) {
e.preventDefault();
let $span = $(this).next(".more-text"); // span or next span
$span = $span.length>0 ? $span : $(this).parent().next(".more-text");
$span.contents().unwrap();
$(this).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis
hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec
maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque
ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod
nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim
sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut
consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p>Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor,
in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis.</p>
<p>Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed
tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt
sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

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;
}

When using ui-router for angularjs, I can't get hash-id linking working as expected. If the URL already has the hash I want to jump to in it (ie whatever.com/#/route1#des1) and I click an anchor tag with a link to #des1, then the link will not work and the page will not scroll down to the div with that id. You can easily cause this with the plunker below by clicking a link, scrolling back to the top, and then clicking the same link.
Please see the plunker with the issue: https://plnkr.co/edit/b8MJ2b37z0nYG0qbsy29?p=preview
Is there a way to allow ui-router to jump to a id that it has just been to? Is this just an issue with ui-router? It doesn't seem to exist when ui-router is not used (see http://plnkr.co/edit/iz1SseMqLISlWZ6fOSKC?p=preview).
<a ui-sref="route1({'#': 'des1'})">Jump to P1</a>
<br>
<a ui-sref="route1({'#': 'des2'})">Jump to P2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="des1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare vulputate nisl eget sagittis. Sed dapibus leo sed ultricies viverra. Maecenas aliquet euismod nibh in elementum. Sed eu augue eget odio luctus lacinia ac non augue. Nunc luctus iaculis tellus sit amet vestibulum. Nunc at purus felis. Cras felis tellus, consequat at tellus eget, pretium efficitur quam. Curabitur sapien nunc, lobortis a metus ut, vehicula aliquet nisi.
Aliquam pellentesque eu turpis in interdum. Nulla porttitor urna magna, a aliquam justo lobortis dignissim. Donec tincidunt, magna vel interdum bibendum, velit sem vulputate ipsum, iaculis volutpat est arcu id orci. Nulla venenatis ipsum non interdum pharetra. Nullam mattis, orci at pretium suscipit, lacus lacus sagittis dui, sit amet sollicitudin sem ipsum non enim. Aenean pulvinar leo risus, vel imperdiet nulla eleifend et. Duis vel neque sagittis, dapibus arcu et, interdum arcu. Proin at molestie elit. Vivamus aliquam porta urna et tincidunt. Integer eu odio risus. Suspendisse ornare magna ac erat maximus, quis faucibus lectus eleifend. Aliquam pellentesque sagittis lacus sed tempor. Praesent aliquet tellus non nunc euismod varius. Donec pharetra cursus nunc, nec commodo erat malesuada nec. Nam ac facilisis lorem, eget vestibulum mauris. Nam nunc odio, tempor at condimentum et, pellentesque vitae erat.
Donec mollis dolor fringilla sapien condimentum, non ultrices tortor blandit. Aenean vel massa ipsum. Ut leo nisl, vehicula nec mi elementum, varius lacinia risus. Vestibulum metus nibh, hendrerit non velit sit amet, posuere hendrerit nunc. Aenean ut felis in nisi convallis interdum. Vestibulum posuere, nulla vitae bibendum elementum, dui metus auctor ante, et ullamcorper leo turpis quis tellus. Phasellus condimentum tellus quis posuere tempus. Fusce faucibus laoreet turpis a hendrerit. Phasellus tempor consectetur urna. In dictum turpis et ligula dictum, nec placerat mi elementum. Sed interdum, eros ut finibus elementum, elit quam auctor dui, et maximus orci justo commodo tortor. Maecenas eu efficitur massa.
Vivamus at eros vel magna facilisis lacinia quis vel est. Vivamus et quam ligula. Vestibulum hendrerit scelerisque enim, eu dapibus dui pulvinar a. Vestibulum mollis tortor sit amet tempor pharetra. Nullam facilisis leo sit amet justo auctor porttitor. Nunc laoreet pellentesque orci, sed ultrices tortor viverra eget. Integer ornare pellentesque suscipit. Mauris euismod leo dui, sit amet finibus tortor fermentum vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque efficitur tortor erat, at eleifend libero feugiat in. Pellentesque vitae ullamcorper nulla. Quisque ullamcorper facilisis turpis. Nullam blandit, mi sed pulvinar dignissim, lorem dui mattis justo, eget molestie risus enim a lorem. Aenean efficitur turpis id sem ornare, nec sagittis massa fermentum.
Nam iaculis augue vel leo volutpat mattis. Etiam et imperdiet dui. Cras egestas elementum porttitor. Aliquam neque purus, feugiat in risus in, cursus gravida quam. Donec rutrum neque massa, quis feugiat urna dignissim et. Aenean sit amet maximus dui, et aliquam ligula. Suspendisse mollis feugiat ex, eget consequat massa posuere sit amet. Donec sagittis, lacus eget imperdiet facilisis, libero leo consequat lorem, sed interdum quam nisi a metus. Proin ante mi, porttitor eget commodo eu, sollicitudin ac neque. Quisque auctor metus sed iaculis tempor. Sed pellentesque ligula interdum elit tincidunt elementum nec id velit. Nullam faucibus eu eros nec congue. Etiam hendrerit neque in velit mattis, eget scelerisque libero fringilla. Nulla facilisi. Suspendisse blandit ligula sed commodo vehicula. Etiam pellentesque ex vitae porta maximus.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="des2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare vulputate nisl eget sagittis. Sed dapibus leo sed ultricies viverra. Maecenas aliquet euismod nibh in elementum. Sed eu augue eget odio luctus lacinia ac non augue. Nunc luctus iaculis tellus sit amet vestibulum. Nunc at purus felis. Cras felis tellus, consequat at tellus eget, pretium efficitur quam. Curabitur sapien nunc, lobortis a metus ut, vehicula aliquet nisi.
Aliquam pellentesque eu turpis in interdum. Nulla porttitor urna magna, a aliquam justo lobortis dignissim. Donec tincidunt, magna vel interdum bibendum, velit sem vulputate ipsum, iaculis volutpat est arcu id orci. Nulla venenatis ipsum non interdum pharetra. Nullam mattis, orci at pretium suscipit, lacus lacus sagittis dui, sit amet sollicitudin sem ipsum non enim. Aenean pulvinar leo risus, vel imperdiet nulla eleifend et. Duis vel neque sagittis, dapibus arcu et, interdum arcu. Proin at molestie elit. Vivamus aliquam porta urna et tincidunt. Integer eu odio risus. Suspendisse ornare magna ac erat maximus, quis faucibus lectus eleifend. Aliquam pellentesque sagittis lacus sed tempor. Praesent aliquet tellus non nunc euismod varius. Donec pharetra cursus nunc, nec commodo erat malesuada nec. Nam ac facilisis lorem, eget vestibulum mauris. Nam nunc odio, tempor at condimentum et, pellentesque vitae erat.
Donec mollis dolor fringilla sapien condimentum, non ultrices tortor blandit. Aenean vel massa ipsum. Ut leo nisl, vehicula nec mi elementum, varius lacinia risus. Vestibulum metus nibh, hendrerit non velit sit amet, posuere hendrerit nunc. Aenean ut felis in nisi convallis interdum. Vestibulum posuere, nulla vitae bibendum elementum, dui metus auctor ante, et ullamcorper leo turpis quis tellus. Phasellus condimentum tellus quis posuere tempus. Fusce faucibus laoreet turpis a hendrerit. Phasellus tempor consectetur urna. In dictum turpis et ligula dictum, nec placerat mi elementum. Sed interdum, eros ut finibus elementum, elit quam auctor dui, et maximus orci justo commodo tortor. Maecenas eu efficitur massa.
Vivamus at eros vel magna facilisis lacinia quis vel est. Vivamus et quam ligula. Vestibulum hendrerit scelerisque enim, eu dapibus dui pulvinar a. Vestibulum mollis tortor sit amet tempor pharetra. Nullam facilisis leo sit amet justo auctor porttitor. Nunc laoreet pellentesque orci, sed ultrices tortor viverra eget. Integer ornare pellentesque suscipit. Mauris euismod leo dui, sit amet finibus tortor fermentum vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque efficitur tortor erat, at eleifend libero feugiat in. Pellentesque vitae ullamcorper nulla. Quisque ullamcorper facilisis turpis. Nullam blandit, mi sed pulvinar dignissim, lorem dui mattis justo, eget molestie risus enim a lorem. Aenean efficitur turpis id sem ornare, nec sagittis massa fermentum.
Nam iaculis augue vel leo volutpat mattis. Etiam et imperdiet dui. Cras egestas elementum porttitor. Aliquam neque purus, feugiat in risus in, cursus gravida quam. Donec rutrum neque massa, quis feugiat urna dignissim et. Aenean sit amet maximus dui, et aliquam ligula. Suspendisse mollis feugiat ex, eget consequat massa posuere sit amet. Donec sagittis, lacus eget imperdiet facilisis, libero leo consequat lorem, sed interdum quam nisi a metus. Proin ante mi, porttitor eget commodo eu, sollicitudin ac neque. Quisque auctor metus sed iaculis tempor. Sed pellentesque ligula interdum elit tincidunt elementum nec id velit. Nullam faucibus eu eros nec congue. Etiam hendrerit neque in velit mattis, eget scelerisque libero fringilla. Nulla facilisi. Suspendisse blandit ligula sed commodo vehicula. Etiam pellentesque ex vitae porta maximus.
</div>
Sorry for the poorly formatted code

Angular recognizes #-prefixed paths as Angular paths (by default).If you want to be able to scroll to element using anchors, you can setup a function in your controller that uses $location's hash() method to set the hash.
.controller('appCtrl', function ($location, $scope) {
$scope.scrollTo = function (hash) {
$location.hash(hash);
};
})
Then in your HTML
Jump to P1
<br>
Jump to P2

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 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.