时间戳

首页 > 解决方案 > Blur div onscroll

javascript - Blur div onscroll

问题描述

So I have a navbar that I want to have a clear background in its initial position, but to have it become blurred when the user scrolls. I think I have part of the solution here:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
    document.getElementById("navbar-background").style.backdrop-filter = "blur(10px)";
  } else {
    document.getElementById("navbar-background").style.backdrop-filter = "blur(0px)";
  }
}

obviously, backdrop-filter isn't the correct thing to put here as a get an rvalue parsing error, so how would I go about this?

标签： javascripthtmlcss

解决方案

我认为您正在寻找或者您可以使用;webkitFilter设置样式setAttribute

更新：使用el.setAttribute("style", "backdrop-filter:blur(10px)")

window.onscroll = function() {
  scrollFunction()
};

var navBar = document.getElementById("navbar-background");

function scrollFunction() {
  if (window.scrollY > 10) {
    navBar.setAttribute("style", "backdrop-filter:blur(10px)")
  } else {
    navBar.setAttribute("style", "backdrop-filter:blur(0)")
  }
}
body {
  height: 3000px;
  background: darkblue;
}

#navbar-background {
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5); 
  transition: .2s ease-in-out;
}

p {
  color: lightgray;
}
<div id="navbar-background">
  <h2>Hello I am a navbar</h2>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed libero enim sed. Egestas erat imperdiet sed euismod. Pulvinar proin gravida hendrerit lectus a. Donec et odio pellentesque diam volutpat commodo sed. Vitae congue mauris rhoncus aenean vel. Elementum nisi quis eleifend quam adipiscing vitae proin. Dictum at tempor commodo ullamcorper a lacus vestibulum. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Id diam maecenas ultricies mi eget mauris. Cursus in hac habitasse platea dictumst quisque sagittis purus sit.

A lacus vestibulum sed arcu non odio euismod lacinia at. Tincidunt eget nullam non nisi est. Nibh sed pulvinar proin gravida hendrerit. Vel risus commodo viverra maecenas accumsan lacus vel. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Sapien pellentesque habitant morbi tristique senectus et. Lacus vel facilisis volutpat est velit egestas dui id. In vitae turpis massa sed elementum tempus egestas sed sed. Dictum fusce ut placerat orci. Aenean et tortor at risus viverra. Odio pellentesque diam volutpat commodo sed. Aliquam malesuada bibendum arcu vitae elementum. Tempus egestas sed sed risus. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Lorem donec massa sapien faucibus et. Fames ac turpis egestas integer eget aliquet nibh praesent. Quisque non tellus orci ac auctor augue. Tincidunt tortor aliquam nulla facilisi.

Sed enim ut sem viverra aliquet eget. Eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet commodo nulla facilisi nullam vehicula ipsum a. Pulvinar etiam non quam lacus suspendisse. Sit amet aliquam id diam maecenas ultricies. Tellus pellentesque eu tincidunt tortor aliquam. Gravida cum sociis natoque penatibus et magnis dis parturient. Nunc sed velit dignissim sodales ut. Fusce id velit ut tortor pretium viverra. Ullamcorper morbi tincidunt ornare massa eget. Nec ullamcorper sit amet risus nullam eget. Erat nam at lectus urna duis. Molestie at elementum eu facilisis sed. Neque laoreet suspendisse interdum consectetur libero id faucibus. Erat velit scelerisque in dictum non. In eu mi bibendum neque egestas congue quisque egestas diam. Adipiscing tristique risus nec feugiat. Ornare suspendisse sed nisi lacus. Nec dui nunc mattis enim ut tellus. Egestas integer eget aliquet nibh praesent tristique magna sit amet.

Posuere urna nec tincidunt praesent semper feugiat nibh. Gravida rutrum quisque non tellus. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Amet venenatis urna cursus eget. Suspendisse ultrices gravida dictum fusce ut. Facilisis gravida neque convallis a cras. Nam aliquam sem et tortor consequat id porta nibh venenatis. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Viverra adipiscing at in tellus. Facilisis gravida neque convallis a. Cursus in hac habitasse platea dictumst quisque sagittis. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Mattis aliquam faucibus purus in massa. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Turpis cursus in hac habitasse platea. Montes nascetur ridiculus mus mauris vitae ultricies. Et odio pellentesque diam volutpat commodo sed egestas. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Etiam tempor orci eu lobortis elementum.

Sed cras ornare arcu dui vivamus arcu. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Fames ac turpis egestas integer eget aliquet nibh praesent tristique. Ultricies integer quis auctor elit sed vulputate mi. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Iaculis eu non diam phasellus. Augue interdum velit euismod in pellentesque massa placerat. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. At auctor urna nunc id cursus. Massa sapien faucibus et molestie ac feugiat sed lectus. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet.
</p>

推荐阅读