如何在菜单部分滚动后线性显示背景颜色

How to display background color linearly after scrolling on menu section?

本文关键字：线性 显示 背景 颜色 滚动 菜单部      更新时间：2023-09-26

我必须在菜单上滚动后显示线性背景色。在当前部分没有背景色，但滚动后应该显示背景色。我怎样才能做到这一点呢?

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".entry_section").offset().top > 50) {
        $(".scroll-menu").addClass("scroll-menu-padding");
        $(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
    
     
    } else {
        $(".scroll-menu").removeClass("scroll-menu-padding");
         $(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
     
    }
});
body{
	height: 900px;
}
.entry_section
{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  text-align: center;
}
.fixed-entry-field
{
  display: inline-block;
  color: red;
}
.fixed-entry-field-scroll-bg
{
    background-color: #000;
  width: 100%;
  padding: 25px 0;
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>

当你在固定元素上添加height: 0;时，它看起来很奇怪，这样当你应用padding: 25px时，它会将内容向下推，得到你提到的非线性效果。

通过简单地移除约束，您可以在滚动时在菜单上获得所需的效果。

查看更新后的代码片段，查看完整的行为。

PS:如果你想保持高度不变，只需删除20px的填充在你的.fixed-entry-field-scroll-bg类，它会做的技巧。

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".entry_section").offset().top > 50) {
        $(".scroll-menu").addClass("scroll-menu-padding");
        $(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
    
     
    } else {
        $(".scroll-menu").removeClass("scroll-menu-padding");
         $(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
     
    }
});
body{
	height: 900px;
}
.entry_section
{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.fixed-entry-field
{
  display: inline-block;
  color: red;
}
.fixed-entry-field-scroll-bg
{
    background-color: #000;
  width: 100%;
  padding: 25px 0;
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>

检查css部分。fixed-入口-field-scroll-bg这里我使用过渡效果和线性渐变的颜色LiveFiddle。欲了解更多细节，请阅读线性梯度&对于过渡效果。

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".entry_section").offset().top > 50) {
        $(".scroll-menu").addClass("scroll-menu-padding");
        $(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
    
     
    } else {
        $(".scroll-menu").removeClass("scroll-menu-padding");
         $(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
     
    }
});
body{
	height: 900px;
}
.entry_section
{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  text-align: center;
}
.fixed-entry-field
{
  display: inline-block;
  color: red;
}
.fixed-entry-field-scroll-bg
{
  /* For browsers that do not support gradients */
  background: red;
  /* Standard syntax */
  background: linear-gradient(#000, #bbb);
  /* For Safari this the part  */
  -webkit-transition: width 0.7s, height 0.8s; 
  transition: width 0.7s, height 0.8s;
  width: 100%;
  height: 75px;
  padding: 25px 0;
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>

相关文章：