I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively.
The concept is as follows:
I aim to create a div that replicates the content of another div located below it. However, this replicated div should have an adjustable height that changes as the user scrolls through the page.
This setup would result in the duplicated div smoothly following the user's scroll position, creating a visually appealing effect.
One practical application of this technique is to blur the background behind a menu, simulating frosted glass and achieving cross-browser compatible background blur effects.
This project draws inspiration from code by Chris, which can be found here.
You can view my Codepen demonstration here.
Javascript
const content = $('#content');
const blurredContentFrame = $('#blurredContentFrame');
$(document.body).append(
'<div id="blurredContentFrame">' +
'<div id="blurredContent"></div>' +
'</div>');
content.clone().appendTo('#blurredContent');
$(window).scroll(function () {
const fromTop = $(window).scrollTop();
const heightCalc = (398 + fromTop);
blurredContentFrame.css('height', heightCalc + 'px');
console.log(fromTop);
console.log('heightCalc:' + heightCalc);
console.log('Height:' + blurredContentFrame.css('height'));
});
CSS
body {
height: 100%;
width: 100%;
}
#content {
display: block;
background-image: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4e58a56fd7bd17453e3cf914aa365870&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
height: 100%;
width: 100%;
}
.article__description {
height: 1000px;
}
#blurredContentFrame {
overflow-y: hidden;
display: block;
z-index: 150;
height: 100px;
text-align: center;
margin: 0 auto;
top: 0;
position: absolute;
width: 100%;
}
#blurredContent {
margin: 0 auto;
height: 100%;
width: 100%;
text-align: center;
overflow-y: hidden;
right: 5vw;
left: 0;
top: 0;
position: absolute;
filter:blur(4px);
HTML
<body>
<div id="content">
<p class="article__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in lobortis ex. Suspendisse vestibulum varius porta. Ut ligula risus, fermentum nec elit eget, feugiat consequat diam. Donec accumsan tristique convallis. Curabitur sit amet facilisis sapien.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sollicitudin augue et metus volutpat pellentesque. Maecenas dui quam, iaculis at massa in, varius varius lectus. Fusce efficitur justo sed lobortis efficitur.
Sed vel quam at mi tristique convallis non id justo. Vestibulum molestie odio sed congue tempor. Mauris at nisl a risus finibus efficitur. Mauris quis luctus erat, id auctor tellus. Nulla vel suscipit metus. Donec porta dapibus eros et finibus.
Maecenas suscipit nisl sed dictum luctus. Proin suscipit laoreet ante a dictum. Donec ornare, erat quis dignissim maximus, neque ex laoreet massa, sed convallis turpis turpis ut elit. Suspendisse varius augue ante, sed fermentum dui facilisis non.
Nulla neque leo, placerat ut tempor quis, ornare sed lorem. Mauris egestas sem non magna semper lobortis. <br/>
<mark>Note that our store is closed on Christmas eve and Christmas day.</mark>
</p>
</div>
</body>
Output from console.log indicates the following: