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

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>