Change height of an element on scroll

Question

I am trying to increase the height of an element when a user scrolls on page. I have tried several methods, but for some reason I can't get it working.

The idea is following.

I would like to have a div which contains duplicated content of a div below him. But, I would like it to have a variable height which depends on the scroll.

That way, the bottom of the duplicated, blurred div would follow user on the screen.

Practical use of this would be to blur a background behind a menu to create an effect of frosted glass and to create cross-browser compatible background-blur.

I was heavily inspired by code from Chris which you can find here

My Codepen link is 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 says this:

You are appending `'
'` to the body immediately after you try to look it up in the dom. This would suggest it doesn't exist in the dom yet. Try to find it in the DOM **after** you append it to the body — Taplar, Feb 28 '18 at 17:31
You should add your code in $(document).ready(function(){ //code here }) — Marios Nikolaou, Feb 28 '18 at 17:32

score 3 · Accepted Answer · answered Feb 28 '18 at 17:47

Your problem is here

const content = $('#content');
const blurredContentFrame = $('#blurredContentFrame');

$(document.body).append(
    '<div id="blurredContentFrame">' +
    '<div id="blurredContent"></div>' +
    '</div>');

content.clone().appendTo('#blurredContent');

You are trying to find the element before you have added it to the page. You should just be able to change it to

const content = $('#content');

$(document.body).append(
    '<div id="blurredContentFrame">' +
    '<div id="blurredContent"></div>' +
    '</div>');

const blurredContentFrame = $('#blurredContentFrame');

content.clone().appendTo('#blurredContent');

This worked wonderfully. I can't wait for background-filter to get more support so that this won't be needed. — prius, Mar 01 '18 at 09:28

score 1 · Answer 2 · answered Feb 28 '18 at 17:51

1

https://jsfiddle.net/k73q7tL5/16/

I used document.getElementById instead of Jquery $() method.

And move content and blured declaration after

$(document.body).append(
'<div id="blurredContentFrame">' +
'<div id="blurredContent"></div>' +
'</div>');

answered Feb 28 '18 at 17:51

fared

161
2
12

1

Your answer is great, but I had to award the correct answer to Amos47 because it was closer to my code. Thank you for the alternative though – prius Mar 01 '18 at 08:53

Change height of an element on scroll

2 Answers2