滚动时更改元素的高度

Question

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

这个想法如下。

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

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

实际使用这将模糊菜单背后的背景，以创建磨砂玻璃的效果，并创建跨浏览器兼容的背景模糊。

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

我的Codepen链接是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>');

滚动时更改元素的高度

问题描述投票：3回答：2

2个回答

最新问题

滚动时更改元素的高度

问题描述 投票：3回答：2

2个回答

最新问题

问题描述投票：3回答：2