如何使用 Bootstrap 和 jQuery 创建一个带有滚动阴影效果的收缩标题？

Question

我正在使用 Bootstrap 4 和 jQuery 开发一个网页，我想创建一个当用户向下滚动页面时缩小尺寸并添加阴影效果的标题。我已经编写了一些大部分有效的代码，但我没有得到我想要的平滑过渡，并且阴影效果不一致。

问题：

。向下滚动时标题和徽标应缩小。 。滚动期间标题下方应出现阴影。 。过渡应该是平稳的，但我的感觉不稳定。

这是我一直在使用的 HTML、CSS 和 JavaScript 代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <h6 id="logo" class="display-7 font-weight-bold text-dark">
                Mahyar<br>ART<br>GALERIE
            </h6>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

#logo {
    font-size: 2.5rem;
    transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 10px 0;
}

.shrink #logo {
    font-size: 1.5rem;
    padding: 5px 0;
}

.navbar {
    transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 20px 0;
}

.shrink .navbar {
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

JS：

#logo {
    font-size: 2.5rem;
    transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 10px 0;
}

.shrink #logo {
    font-size: 1.5rem;
    padding: 5px 0;
}

.navbar {
    transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 20px 0;
}

.shrink .navbar {
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

我的问题：

过渡并不像我想要的那么顺利，尤其是在较慢的设备上查看时。 标题下的阴影效果有时无法正确显示或闪烁。 我尝试过的：

我已经调整了过渡时间，但仍然遇到不稳定的情况。 我在不同的浏览器上进行了测试，但阴影问题仍然存在。 问题：如何让过渡更加平滑，并确保阴影效果在不同设备和浏览器上一致显示？

Answer 1

您没有分享在

shrink

事件发生时用于设置/取消设置

scroll

类的 Javascript 代码。

因此，不清楚您所经历的实际行为是什么，以便与任何建议的解决方案进行比较。

顺便说一句，由于您已经定义了 css 过渡，我只是更改了一个选择器以更好地匹配徽标，并添加了向

shrink

元素添加/删除

.navbar

类所需的最少 JavaScript。

按照预期正确工作：

//on DOM ready
$(document).ready(function() {
  //adds the window scroll event handler
  $(window).scroll(function() {
    //that will add/remove the shrink class to the .navbar according to the scrollbar relative to threshold
    const threshold = 50;
    if ($(this).scrollTop() > threshold) { 
      $('.navbar').addClass('shrink');
    } else {
      $('.navbar').removeClass('shrink');
    }
  });
});

#logo {
  font-size: 2.5rem;
  transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding: 10px 0;
}

.shrink #logo{
  font-size: 1.5rem;
  padding: 5px 0;
}

.navbar {
  transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  padding: 20px 0;
}

.navbar.shrink {
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section {
  height: 2000px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <h6 id="logo" class="display-7 font-weight-bold text-dark">
        Mahyar<br>ART<br>GALERIE
      </h6>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<section>
  ...PAGE CONTENT...
</section>