html - 使用 css 停止 Logo 和背景颜色向下滚动

Question

这是演示站点，所以我提供凭据。如果不提供凭据，就不可能得到答案。

请访问此链接:http://2.kidsdial.com/customer/account/login

登录邮箱:kidsdial2@gmail.com 密码:kidsdial2

然后点击这里:http://2.kidsdial.com/marketplace/marketplaceaccount/myproductslist/

继续滚动。你可以看到

“标志及其背景色”一直在中间出现。

我想避免这种情况。我想在向下滚动时保持 Logo 和原始位置。

我想将 Logo 及其背景颜色保持在固定位置，当我们滚动时它不应该是可见的。

我正在使用这个 CSS:

<style>

.wk_mp_btn1 {background: #3fbdf7 none repeat scroll 0 0;color: #fff;}
.social-icons {
      display:none !important; // for removing social icons
    }


</style>

<style>

.div_link-cart { display:none !important; /* remove cart button */  }
.header_search { display:none !important; }
.inner_menu    { display:none !important  }  




.welcome-msg   { display:none !important  }


.grid_6.pull_18.col-left.sidebar > div:last-child {
    display: none;  /* remove complete my acccount section */ 
}    
.breadcrumbs  {  display:none !important  /* remove home > My account */ } 

.block-title  {  display:none !important  /* remove markeplace text */ } 

ul.wk_cont_ul li {
    display: inline-block;

}


.wk_cont_ul  { 
 // add menu background color
}


.wk_cont_ul_one 


{

    position:relative;
    left:640px;
    bottom:69px;
    display: inline-block;
    font-size:13px;
    list-style-type: none;
}


    ul.wk_cont_ul_one li

    { display: inline-block;}


</style>


<style type="text/css" media="screen"> #horizontalmenu ul { padding:1; margin:1; list-style:none; } #horizontalmenu li { float:left; position:relative; padding-right:100; display:block; border:0px solid #CC55FF; border-style:inset; } #horizontalmenu li ul { display:none; position:absolute; } #horizontalmenu li:hover ul{ display:block; background:white; height:auto; width:8em; } #horizontalmenu li ul li{ clear:both; border-style:none;} 



</style>


<style>

.mymenu  {

    font-size:17px;
    color : white;   // increasse menu font size and color
}

.wk_cont_ul 
 {
    position:relative;
    bottom:50px;
    background:yellow;

}

.widget.widget-static-block  {  display:none !important   } 




.mymenu li { margin-right:10px; }
.mymenu li a{ text-decoration: none;padding: 5px; }
  .mymenu li a:link{ text-decoration: none; }
.mymenu li a:hover{ text-decoration: none;background:#ffff00; }



</style>

<!-- for increasing products list table size -->

<style>
.fieldset {
    float: left;
    padding: 0 !important;
    width: 49%;
}




.fieldset {
    padding: 0 !important;
    width: 100% !important;
}

.hor-scroll{
    width: 100% !important;
}

</style>



<!-- for menu and logo color -->

<style>

#horizontalmenu .mymenu > li {
    height: 32px;
    line-height: 32px;
    width: 100px;
}
#main_header .header-container .header {
    background-color: #ffff00;
}
#horizontalmenu{
    margin-top: -5px;
}

</style>

Answer 1

您可以仅使用 css 覆盖规则。在您的 css 文件中，您可以将 position: relative !important; 添加到您的 #main_header 这将覆盖标题的固定位置