在滚动时使用 javascript 更改 css 的框阴影

Question

我的css我的bootstrap导航如下

.navbar-default
 {
    background-color: #fff;
    box-shadow: 5px -149px 90px 200px rgba(255,255,255,1);
    border-color: #fff;
    height:0px;
    padding: 0px;
    border: 0px;
}

在我的 js 文件中，我使用 jquery

调用此函数

$(window).scroll(function(){
    var wScroll = $(this).scrollTop();

    if (wScroll==500)
    { 
        $('.navbar-default').attr("box-shadow","5px -49px 190px 220px rgba(255,255,255,1)");
    }
    console.log(wScroll);
});

我想要的是在滚动大约 500 像素后更改我的框阴影，但它没有发生请帮我解决这个问题？

Answer 1

将if (wScroll==500)更改为if (wScroll>=500)

和$('.navbar-default').attr到$('.navbar-default').css。

$(window).scroll(function(){
        var wScroll = $(this).scrollTop();

        if (wScroll>=500)
        { 
            $('.navbar-default').css("box-shadow","5px -49px 190px 220px rgba(255,255,255,1)");
        }
    });

编辑： 为了简化效果，使用过渡：

.navbar-default {
  transition: ease .5s;
 -webkit-transition: ease .5s;
}

Answer 2

试试这个sample

$('.navbar-default').css("box-shadow", "rgb(121, 122, 195) 0px 5px 5px 5px")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a href="#" class="navbar-brand"> <img alt="Brand" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC"
              width="20"> </a>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

我希望能以某种方式提供帮助

在滚动时使用 javascript 更改 css 的框阴影

Changing box-shadow of css using javascript on scroll

javascript

jquery

css

scroll

box-shadow