Question

这是演示网站，所以我提供凭据。如果没有凭证，就无法得到答案。

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

使用电子邮件登录：kidsdial2@gmail.com密码：kidsdial2

然后点击此处：http://2.kidsdial.com/marketplace/marketplaceaccount/myproductslist/

继续滚动。你可以看到

“徽标及其背景颜色”继续在中间。

我想避免这种情况。我想在向下滚动时保留徽标并保持其原始位置。

我想将徽标及其背景颜色保持在恒定位置，滚动时不应该看到它。

我正在使用这个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这将覆盖标题中固定的位置

Answer 2

如果您使用的是bootstrap，那么您可以在班级中使用此navbar-fixed-top

＆＃13;

# menu-id
{
    margin-top: 100px;
    z-index: 0;
    position: absolute;
}

＆＃13;

<div><nav class="navbar navbar-fixed-top" role="navigation"></div>

＆＃13;

使用CSS向下滚动停止徽标和背景颜色

2 个答案: