改变滚动元素的高度

Question

我试图在用户滚动页面时增加元素的高度。我尝试了几种方法，但由于某种原因我无法让它工作。

思路如下。

我想要一个 div，其中包含他下面的 div 的重复内容。但是，我希望它有一个可变的高度，这取决于滚动。

这样，重复的、模糊的 div 的底部将在屏幕上跟随用户。

这个的实际用途是模糊菜单后面的背景以创建磨砂玻璃效果并创建跨浏览器兼容background-blur.

我深受 Chris 代码的启发，您可以找到 here

我的 Codepen link 是 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>

console.log 的输出是这样的：

Answer 1

你的问题就在这里

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

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

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

您试图在将元素添加到页面之前找到该元素。您应该可以将其更改为

const content = $('#content');

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

const blurredContentFrame = $('#blurredContentFrame');

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

Answer 2

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

我使用了 document.getElementById 而不是 Jquery $() 方法。

并在

之后移动内容和模糊声明

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

改变滚动元素的高度

Change height of an element on scroll

javascript

jquery

css

scroll

gaussianblur