Question

这是我的网站http://www.expresskerala.com的链接。在这个网站我需要使标题粘。有没有办法让它粘。我试过这段代码。

.site-header {
    background: #e5e5e5 none repeat scroll 0 0;
    position: fixed;
    width: 100%;
    z-index: 99 !important;
}

但是当我使用此代码时，其他内容将会失效。对此有什么解决方案吗？这应该也是响应。

Answer 1

由于从文档流中取出position:fixed元素，您需要将等于.site-header高度的上边距添加到下一个元素。您还需要添加top:0以将.site-header修复到文档顶部。

.site-header {
    background: #e5e5e5 none repeat scroll 0 0;
    position: fixed;
    width: 100%;
    z-index: 99 !important;
    top: 0;
}
.site-header + * {
    margin-top: 240px; 
    // you should change this using media queries if the site-header height changes
}

Answer 2

这样的事情：

@media only screen and (min-width: 1024px) {
    .site-header {
        position: fixed;
        z-index: 1;
    }

    #main > .container {
        padding-top: 250px;
    }
}

Answer 3

你可以添加这些css以获得更好的结果

body {
    padding-top: 240px;
}


.site-header {
    background: #e5e5e5 none repeat scroll 0 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}

Answer 4

在您的文件中添加此附加css

.fixed-header {
  position: fixed;
  top:0;
}

比使用这个脚本：

$(window).scroll(function(){
    if ($(window).scrollTop() >= 140) {
       $('nav').addClass('fixed-header');
    }
    else {
       $('nav').removeClass('fixed-header');
    }
});

/* scrollTop() >= 140
   Should be equal the height of the header
 */

Answer 5

试试这个：

<强> JS

$(window).scroll(function(){
    if ($(window).scrollTop() >= 240) {
       $('body').addClass('sticky-header');
    }
    else {
       $('body').removeClass('sticky-header');
    }
});

<强> CSS

 body.sticky-header {
        padding-top: 239px;
    }
    body.sticky-header header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999
    }
    header {
        transition:all ease .3s
    }

希望这可以帮助你。

Answer 6

使用固定位置W3school或使用固定

的jquery

如何在wordpress中使标题粘

6 个答案: