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

Question

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

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

Answer 1

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

只需删除该约束，即可在滚动时在菜单上获得所需的效果。

检查此更新后的代码段是否完整。

PS：如果你想让高度保持不变，只需在你的.fixed-entry-field-scroll-bg类中删除20px的填充，即可以实现这一点。

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

Answer 2

检查css部分.fixed-entry-field-scroll-bg这里我使用了转换效果和线性渐变颜色LiveFiddle。有关详细信息，请阅读此Linear Gradient＆amp; Transition Effect。

＆＃13;

＆＃13;

//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");
     
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;