Question

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

这个想法如下。

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

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

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

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

我的Codepen链接是here

的Javascript

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);

CSS

<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>

HTML

import {  ComponentFactoryResolver, Injectable, Inject, ReflectiveInjector } 
from '@angular/core'
import { DynamicComponent } from './dynamic.component'
import { AdComponent } from './ad.component';

@Injectable()
export class Service {  
  components = [];
  constructor(private factoryResolver: ComponentFactoryResolver) { }

  public setRootViewContainerRef(viewContainerRef) {
    this.rootViewContainer = viewContainerRef;
  }

  public addDynamicComponent(name, service) {
    const factory = 
    this.factoryResolver.resolveComponentFactory(DynamicComponent);    

    let componentRef = this.rootViewContainer.createComponent(factory);    
    this.components.push(componentRef);

    (<AdComponent>componentRef.instance).data = {index: (this.components.length -1), name:name};
    (<AdComponent>componentRef.instance).service = service;     
  } 

  public removeComponent(index) {  
     if (index !== -1) { 
        this.rootViewContainer.remove(index);
        this.components.splice(index, 1);
      }
    }
  }

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 $（）方法。

在

之后移动内容和blured声明

<?php
  $locations = array();

  $lat = 51.503454;
  $lng = -0.119562;

  array_push($locations, $lat, $lng);
?>

滚动时更改元素的高度

2 个答案: