3

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

思路如下。

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

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

它的实际用途是模糊菜单后面的背景以创建毛玻璃效果并创建跨浏览器兼容的 background-blur。

我深受 Chris 的代码启发，你可以在这里找到

我的 Codepen 链接在这里

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 的输出是这样说的：

Console.log 结果

4

2 回答 2

3

你的问题在这里

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');
于 2018-02-28T17:47:50.817 回答
1

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

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

并在之后移动内容和模糊声明

$(document.body).append(
'<div id="blurredContentFrame">' +
'<div id="blurredContent"></div>' +
'</div>');
于 2018-02-28T17:51:55.393 回答