I'm using the following code to adjust the opacity of an element as you scroll past it:
$(window).scroll(function () {
this = myfadingdiv
var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / height;
$(this).css("opacity", opacity);
});
It works great, but it's linear. A request was made to have it fade "sooner".
I'd like it to behave more like this (sorry for the crude MS Paint).
I'm definitely not an algebra person. How can I accomplish this?
Starting from the formulas of this site: http://gizma.com/easing/
You can calculate the easing in this way:
The linear tweening
linearTween = function (t, b, c, d) {
return c*t/d + b;
};
t = current time
var t = $(window).scrollTop() - offset;
t = t < 0 ? 0 : t;
The "Current time" start when your div is on top of the page. Before is 0 (the negative values), after the value is positive (the scrolled pixel).
b = start value
Is 1, your start opacity
c = change in value
Change the start value of -1 (1-1 = 0 opacity)
d = duration
The time finish when all div is scrolled, the duration is the height of the div
Now you have all easing functions for create your custom animation
$(window).scroll(function() {
var height = $('#scroll').height();
var offset = $('#scroll').offset().top;
var opacity;
//opacity = (height - $(window).scrollTop() + offset) / height;
var t = $(window).scrollTop() - offset;
t = t < 0 ? 0 : t;
opacity = easeOutCirc(t, 1, -1, height);
$('#scroll').css("opacity", opacity);
});
/* SOME EASING */
linearTween = function(t, b, c, d) {
return c * t / d + b;
};
easeInQuad = function(t, b, c, d) {
t /= d;
return c * t * t + b;
};
easeInOutCirc = function(t, b, c, d) {
t /= d / 2;
if (t < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
t -= 2;
return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
};
easeOutCirc = function(t, b, c, d) {
t /= d;
t--;
return c * Math.sqrt(1 - t * t) + b;
};
#scroll {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum
ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam
augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis.
Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam
hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.
<div id="scroll">
Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a
egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id
mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante.
Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci
nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce
ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero,
eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non
felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus,
eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat
consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper
turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue
leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam
bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit,
eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus
nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue
luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat
dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean
et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at
convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta
quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et
tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean
a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis
risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet
quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed
maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum.
</div>
Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas
eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim.
Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo
urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat.
Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper
turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin
purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper
ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec
in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In
et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit.
In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis
eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet.
Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra.
Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus
ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras
ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum
rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar
sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta.
Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa,
sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius
sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo,
at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat.
Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse
condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.
var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / (height * .9);
$(this).css("opacity", opacity);
Try something "like" that. You may want to put whatever the height "modifier" is in a variable. I'm no math guru either.
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 would like to be able to hide a div that meets another in JavaScript.
I found this code but I can't adjust the distance between the red and green div. I need to put a lot of content between the green div and the red div.
In this code the red div disappears when it comes into contact with the green one
window.onscroll = function() {
cacherHeader()
};
var header = document.getElementById("header");
var essai = document.getElementById("essai");
var position_essai = essai.offsetTop;
function cacherHeader() {
if (window.pageYOffset <= position_essai) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
height: 200px;
padding-top: 20px;
}
#essai {
background-color: green;
}
#conteneur_02 {
height: 1500px;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">conteneur 1</div>
<div id="essai">Essai</div>
<div id="conteneur_02">conteneur 2</div>
The code you use has nothing to do with "two divs meeting". The #header disappears when the window.pageYOffset is greater than the offsetTop of the #essai.
This means that you can have any length content between the two - it just simply updates the value when the #header classes are toggled.
I updated the snippet: removed the values that set the height of the containers from the CSS - now they stretch with the content.
Also, added a function to get the current offsetTop of an element - otherwise the values would be recalculated only on page refresh and not on if the window width (thus the container widths) changes.
window.onscroll = function() {
cacherHeader()
};
function getOffsetTop(el) {
return el.offsetTop
}
const header = document.getElementById("header");
const essai = document.getElementById("essai");
function cacherHeader() {
if (window.pageYOffset <= getOffsetTop(essai)) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
padding-top: 20px;
}
#essai {
background-color: green;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>
<div id="essai">Essai</div>
<div id="conteneur_02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>
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>
I am trying to add a help box at the right hand side of my page. I want it to stay in the same place as the user scrolls and I want it to collapse to a tab at the right hand side, when they close it.
A bit like this:
https://www.elated.com/articles/css3-floating-follow-tab-with-rollover-effects/
but it needs to expand and collapse.
I can't see any examples of how to do this anywhere.
I'm sure you'll find much better implementations of this, however this is one way to do it. I just threw it together, I would google around to find something that may be a bit better but this should give you an idea of how it could be done.
Note this is with a jquery library you could use vanilla javascript as well. In order to have something happen on click you will need to use javascript. If you want it to happen on hover this can be done with just css.
$(document).ready(function(){
$(document).on('click', "#helpbar span", function(){
if($(this).parent().hasClass('closed')){
$(this).parent().removeClass('closed').addClass('open');
$(this).find('p').text('CLOSE');
}else if($(this).parent().hasClass('open')){
$(this).parent().removeClass('open').addClass('closed');
$(this).find('p').text('HELP');
}
});
});
#content{width:400px;}
.closed{
width:0px;
}
.open{
width:200px;
}
#helpbar{
position: fixed;
right:0;
height:500px;
border:1px solid black;
top: 50px;
}
#helpbar span{
width:100px;
height: 100px;
margin-left:-100px;
border:1px solid black;
display:inline-block;
}
#helpbar span p{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel dui eget viverra. Aliquam ac hendrerit ex, pulvinar dictum nisl. Quisque vitae ullamcorper augue. Donec congue rhoncus augue, eu faucibus erat bibendum a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vehicula ex ut arcu convallis molestie. Nunc sed mi eget purus aliquet consectetur in eget ex. Cras commodo arcu augue. Duis at nulla ligula. Donec id erat non ante viverra sollicitudin sodales vitae velit. Mauris vitae fermentum nulla, eget laoreet erat. Donec in eleifend ligula. Phasellus in pretium enim. Vestibulum ultricies ligula arcu, sed faucibus risus vulputate vitae.
Integer ut erat magna. Sed imperdiet est vitae est rhoncus lacinia. Proin molestie tristique neque ut condimentum. Duis consectetur varius aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam at iaculis ipsum. Integer enim lacus, suscipit mollis consequat nec, lobortis sed magna. Cras ut ultricies arcu. Nulla aliquam magna nulla, ac venenatis nibh tincidunt in. Nulla tristique mauris orci, et sagittis dolor volutpat ut. Aliquam erat volutpat. Nam lectus magna, bibendum eu mauris in, lobortis dictum ipsum. Donec molestie imperdiet feugiat. Pellentesque consequat laoreet ipsum, ac rutrum nunc tempus sit amet. Integer et cursus ex.
Morbi suscipit vitae leo ut consectetur. Maecenas vehicula libero ante, et pharetra ligula varius sed. Integer in lacinia augue. Cras tincidunt justo metus, vitae laoreet orci sollicitudin et. Quisque eu lobortis nisi, vel congue purus. Maecenas malesuada feugiat euismod. Etiam eu justo sed orci semper elementum. Cras et enim gravida, cursus sapien in, consectetur ante. Praesent maximus semper convallis. Praesent sit amet massa sagittis, interdum elit pulvinar, varius erat. Vestibulum ornare, ex id porttitor luctus, odio turpis imperdiet lectus, ac vulputate ipsum metus a dolor. Curabitur et leo nunc. Quisque in nulla ac lectus tempor tempus in quis ipsum.
Cras turpis lectus, volutpat vitae hendrerit vel, sollicitudin sed massa. Suspendisse non sagittis turpis. Quisque a lacus quam. Aenean laoreet lorem at ante viverra viverra. Duis volutpat eros a lacus posuere, non faucibus massa ultrices. Ut imperdiet mi in neque porttitor finibus ac eget arcu. Aliquam quis pharetra nibh, non sagittis neque. Curabitur arcu mauris, euismod ut libero ac, facilisis malesuada sapien. Maecenas ex lectus, suscipit eget nulla molestie, placerat varius leo. Pellentesque eu sapien fringilla, blandit nisi hendrerit, lobortis nunc. Cras ac felis ullamcorper, suscipit metus nec, semper diam. Vivamus quis mauris eget metus condimentum luctus eu non est.
In viverra turpis lacus, id porttitor nibh aliquam euismod. Sed a massa dolor. Aliquam ut commodo quam. Mauris a rutrum quam, non convallis enim. Suspendisse non turpis ultrices, congue nisl eu, fringilla mauris. Donec sed libero felis. Morbi vel lorem nibh. Pellentesque vitae accumsan nisi. Vivamus ut nulla sapien. Donec at diam laoreet mauris gravida mollis. Nullam tortor ante, auctor dignissim molestie ut, tempor nec urna. Vestibulum suscipit ultrices turpis vel tristique. Curabitur fringilla magna vel tortor finibus, ac commodo ipsum accumsan. In rhoncus eleifend enim, eu malesuada ex laoreet ut. Integer elementum sem sed aliquet gravida. Aenean auctor a justo vel ultrices.
Proin accumsan, ex eget hendrerit sodales, urna leo auctor nunc, sed imperdiet tellus sem nec sem. Proin vitae enim ut ipsum blandit dapibus. Fusce tellus tortor, ultricies vel lobortis et, iaculis ut massa. Quisque ullamcorper nulla urna, sit amet sodales risus facilisis a. Nulla in augue at urna pulvinar iaculis a ut nibh. Mauris ornare magna et gravida mattis. Maecenas euismod semper dictum. Maecenas nec risus justo. Proin id iaculis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum vestibulum dui et pellentesque. Duis gravida risus rhoncus, dapibus orci a, finibus leo. Vestibulum maximus sagittis nibh non lacinia.
Nulla sodales odio at orci lobortis luctus. Nulla condimentum a libero at ullamcorper. Etiam in tincidunt ex. Donec non dolor nec augue tincidunt pretium vitae a odio. Aenean fringilla massa erat, in molestie mauris tincidunt eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tincidunt turpis eu justo condimentum fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce mi mauris, ullamcorper at euismod a, mattis et purus.
Proin pharetra arcu ut maximus condimentum. Nullam sit amet vestibulum massa, at vulputate ipsum. Curabitur pretium ultrices sem. Pellentesque ullamcorper orci quis nisi finibus posuere. Aliquam erat volutpat. Donec porttitor justo eget mi lobortis, iaculis gravida libero gravida. Donec in tempus nulla.
Curabitur suscipit ligula sit amet mi pharetra ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Duis quis lectus vitae arcu mattis fermentum at non lacus. Praesent ullamcorper nibh eu ante aliquam, sed fringilla tellus vehicula. Praesent ut mollis risus. Nullam nec dictum orci. Nullam egestas, erat eget vestibulum viverra, felis arcu facilisis massa, ac rutrum tortor est vel libero. Sed fermentum lacus sed massa pellentesque, a ornare orci interdum. Morbi in turpis risus. Donec ullamcorper, quam et blandit varius, quam lorem vulputate turpis, in viverra lectus tortor efficitur ipsum. Suspendisse dictum convallis est, quis bibendum dolor aliquam ut. Aenean hendrerit sapien fermentum dapibus gravida. Morbi eu pulvinar urna. Morbi scelerisque fermentum luctus. Sed ac tortor bibendum, pretium dui tempor, facilisis risus.
Mauris a lorem tristique, euismod lorem quis, varius risus. Donec bibendum nisi sit amet lorem auctor tempus. Nullam maximus erat quis lacus tristique, non aliquet neque semper. Aliquam erat volutpat. Duis elementum, dui in euismod fermentum, mi nisi suscipit erat, vel tincidunt neque felis id felis. Suspendisse tempor mi quam, sed posuere nisl fringilla vel. Mauris vitae diam vehicula urna feugiat facilisis cursus sed ligula. Cras iaculis luctus nisi, quis dictum lacus venenatis ut. Nulla facilisi. Phasellus sit amet lacus diam.
Duis sem libero, pellentesque sed porta hendrerit, elementum commodo dui. Suspendisse felis metus, semper at urna sed, egestas ullamcorper dolor. Fusce eleifend, libero nec euismod posuere, sapien dui maximus est, ut congue lacus diam sed mi. In vitae est sed augue sodales pharetra. Donec sit amet sem magna. Integer ultricies in leo ut mollis. Vestibulum mattis varius erat, sed tempus augue finibus et. Donec feugiat accumsan diam eu efficitur. Nulla eu enim nec urna vehicula vehicula ac euismod dolor. Ut lacinia elit eget aliquam laoreet. Nullam dapibus imperdiet sem et pharetra. Nulla sed quam id turpis porta varius. Mauris dictum a tortor cursus scelerisque. Morbi eu mattis ante. Vestibulum efficitur accumsan diam et ultricies. Nullam pharetra nulla ut augue gravida, sed tincidunt dolor porttitor.
Sed molestie, massa sed mattis tincidunt, sapien velit bibendum lorem, in feugiat risus dui eu mauris. Quisque iaculis laoreet tellus, eget fringilla neque tincidunt et. Fusce metus tellus, euismod nec ornare nec, eleifend vel nunc. Donec et aliquet metus, sed tristique est. Mauris non aliquet urna, eget rutrum enim. Etiam posuere felis eget lacus pellentesque, ut dapibus dui vehicula. Proin vel fermentum ligula. Suspendisse accumsan a velit lacinia mollis. Fusce imperdiet id nisi quis maximus. Curabitur convallis eros nec hendrerit volutpat. Suspendisse vestibulum nibh urna, sed cursus odio euismod vitae. Morbi ornare tempor eros ut scelerisque.</p>
<div id="helpbar" class="closed">
<span><p>HELP</p></span>
<div>
<p>This is where the help is</p>
</div>
</div>
</div>
When I try to stick the md-toolbar in top position its not working properly. I created a custom directive using $mdSticky service in AngularJS.
var app=angular.module('app',['ngMaterial']);
app.controller('test',function(){
});
app.directive('sticky', Sticky)
function Sticky($mdSticky) {
return {
restrict: 'A',
link: function (scope, element) {
$mdSticky(scope, element);
console.log('log sticky..');
}
}
}
<html ng-app="app">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<md-toolbar class="md-hue-2" md-whiteframe="2" sticky>
<h1>testing sticky</h1>
</md-toolbar>
<md-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor magna, ornare ut ipsum vitae, venenatis fermentum est. Vestibulum viverra augue at venenatis rutrum. Duis iaculis et mi eget pharetra. Curabitur a faucibus est. Nulla fermentum imperdiet eleifend. Donec maximus rutrum erat, sit amet dictum diam tempor vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget lacus tincidunt, eleifend orci non, finibus lacus. Proin blandit nisi libero, non vestibulum nunc viverra a. Fusce efficitur risus non sem dignissim, ut varius odio pulvinar. Quisque et orci eleifend, lobortis erat vitae, feugiat elit. Vestibulum laoreet auctor mauris, sit amet faucibus felis. Phasellus pretium dui ipsum, a posuere augue tempus vitae. Ut ornare, nulla in vestibulum egestas, velit tortor accumsan diam, id aliquet velit urna ut ligula. Vestibulum tempus aliquam aliquam.Aenean vestibulum diam eget condimentum sollicitudin. Etiam metus urna, fringilla a pharetra rhoncus, bibendum in lacus. Ut posuere laoreet odio in tincidunt. Vivamus congue felis vestibulum eros mattis, a ullamcorper ligula molestie. Sed non feugiat mauris, varius consequat velit. Aliquam dignissim tellus turpis, et ornare enim laoreet eget. Curabitur finibus lacus vitae felis blandit tempus. Pellentesque blandit ut velit id pharetra. Etiam at metus urna. Mauris ac ligula laoreet, cursus urna varius, efficitur dui. Cras id urna dolor. In blandit, lacus at fermentum facilisis, nibh orci rhoncus justo, nec sodales magna metus sit amet libero.Etiam in sodales odio. Vestibulum congue venenatis velit, sed tristique sapien tristique id. Cras eu blandit lacus. Phasellus viverra ut risus a ornare. Curabitur luctus dapibus odio vel pretium. Vivamus dolor massa, hendrerit eu neque non, vestibulum consectetur orci. Proin porttitor vitae sem a imperdiet.Donec efficitur ultricies enim, ac consequat quam pulvinar eget. Ut ligula odio, sollicitudin eu viverra ac, varius eu ligula. Fusce lectus tortor, efficitur et consequat vitae, aliquam a ante. Phasellus hendrerit purus faucibus felis eleifend, in lacinia leo euismod. Sed blandit nisl nec vehicula egestas. Etiam mauris justo, malesuada quis varius tincidunt, ullamcorper eget ante. Phasellus dolor ipsum, fringilla in aliquam non, aliquet vitae dolor. Nulla ut velit ipsum. Nulla auctor massa pretium imperdiet finibus. Curabitur vulputate risus quis convallis rhoncus.Curabitur nunc dolor, ultrices a ipsum nec, pretium varius libero. Fusce cursus vehicula tortor, ac consequat mauris ultricies eu. Nunc et justo efficitur, blandit turpis quis, feugiat enim. Phasellus accumsan libero vitae tellus ultricies, eu porta ligula vestibulum. Maecenas a nunc nibh. Suspendisse finibus tempor sem eget vulputate. Nullam cursus magna quam, ac accumsan turpis pulvinar sed. Suspendisse rutrum tristique diam eu elementum.Pellentesque at rutrum mauris. Nulla facilisi. Curabitur quis venenatis mi. Praesent ac magna fermentum, lobortis metus ac, condimentum lacus. Etiam vel sem sit amet velit dictum aliquet. Nunc dapibus metus et pretium vestibulum. Sed enim quam, sollicitudin auctor turpis vitae, mollis pulvinar tellus. Vestibulum pretium tortor at dolor venenatis ultrices. Sed dictum urna sit amet porttitor aliquam. Nullam in efficitur lacus, vitae viverra velit. Etiam mattis eu ligula sed gravida. Phasellus eget tellus mauris. Donec a orci faucibus, fringilla lorem vitae, luctus dui.Aliquam risus risus, porttitor aliquam orci at, ultricies tempor metus. Nunc congue, metus id dignissim dignissim, ex tellus maximus magna, feugiat rhoncus nunc orci vel orci. Etiam nunc justo, pellentesque ac lectus eget, feugiat vehicula nibh. Fusce eget egestas nunc. Aliquam aliquam eget magna vel blandit. Vestibulum sagittis nisl elementum nunc auctor rutrum. Duis facilisis purus sit amet urna blandit, id egestas diam blandit. Phasellus tincidunt laoreet velit, et ornare quam. Suspendisse ultrices, mauris quis mattis aliquam, erat odio suscipit quam, nec rutrum tellus tortor et erat. Maecenas felis erat, eleifend a tempor sed, tempor eget nisi.Mauris vehicula diam a libero pretium, in consectetur quam sollicitudin. Phasellus quis lacinia sapien, ut gravida libero. Etiam sapien eros, sodales vitae cursus ac, vehicula nec tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac quam placerat, pharetra leo nec, feugiat nunc. Nullam mattis a mi sed rhoncus. Donec orci magna, facilisis tempor turpis gravida, tincidunt bibendum ante. Quisque cursus at lorem vel ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris posuere eu enim ut iaculis.In vel magna sit amet eros varius interdum vel eget ipsum. Suspendisse vulputate eu urna sit amet tincidunt. Quisque sit amet pulvinar justo. Vivamus aliquam sapien pellentesque nisl pharetra posuere. Fusce vitae arcu lectus. Sed viverra, lorem at finibus sodales, lectus ex luctus eros, quis tincidunt arcu est ut mauris. Nunc efficitur, ante sit amet pulvinar pretium, tortor erat facilisis turpis, vitae rutrum enim nisi semper diam. Quisque bibendum sem libero, ut molestie quam suscipit dapibus. Sed condimentum malesuada tincidunt. Sed mattis et mi eu ultrices. Pellentesque finibus sem velit, et tristique turpis ultricies sed. Nam sed mollis erat. Morbi venenatis dui sit amet nisl lacinia tincidunt. Nunc blandit blandit elementum. Suspendisse sit amet interdum nisi.In sed elit a libero dapibus tristique quis ut ipsum. Suspendisse congue massa eget condimentum efficitur. Quisque non faucibus orci. In hac habitasse platea dictumst. Praesent at eleifend magna, quis tincidunt orci. Maecenas a purus porttitor, pretium ipsum pellentesque, dictum urna. Praesent luctus nisl in eros volutpat convallis. Donec vitae lacus quam. Donec tempor, leo ut laoreet placerat, dolor enim lobortis sapien, sed maximus odio tellus vehicula massa. Cras et augue dolor. Cras feugiat mi et mauris mattis, a mollis massa placerat. Nulla condimentum, leo et feugiat porttitor, libero sapien malesuada nibh, eu volutpat erat eros sed purus. Fusce tincidunt cursus tempor. Praesent vitae venenatis tellus, a ornare velit. Proin accumsan accumsan ultrices.
</p>
</md-content>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
</body>
</html>
The problem is depending on $mdSticky itself. The documentation says something which is not true for this moment. $mdSticky is still using the CSS attribute position: sticky, even if its not supported by the browser.
Taken from the $mdSticky documentation:
Whenever the current browser supports stickiness natively, the $mdSticky service will just use the native browser stickiness.
This simple fiddle demo will help you to check it. Here is some interesting issue on the angular material GitHub page.
I recommend to fallback to position: fixed and try to solve your problem by the "old school way" by using a simple window scroll event directive like:
var app = angular.module('myApp', []);
app.directive('fixed', function ($window) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var topClass = attrs.fixed,
offsetTop = element[0].offsetTop;
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
});
}
};
});
.fixIt {
position: fixed;
top: 0;
}
.header {
height:25px;
width:100%;
border: 1px solid red;
}
.content {
height:1500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div class="header" fixed="fixIt">
</div>
<div class="content">
some content
</div>
</div>