如何在Wordpress中使标题粘滞

Question

This is my the link of website http://www.expresskerala.com . In this website i need to make header sticky. Is there any way to make that sticky.I had tried this code.

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

But when i use this code, the other content will go down. Is there any solution for this. This should be also responsive.

Answer 1

Since a position:fixed element is taken out of the document flow, you need to add a top margin equal to the height of the .site-header to the next element. You also need to add top:0 to fix the .site-header to the top of the document.

.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

Something like this:

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

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

Answer 3

you can add these css to get better result

body {
    padding-top: 240px;
}


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

Answer 4

add this additional css in your file

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

than use also this script:

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

Try this one:

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
    }

Hope this may help you.

Answer 6

使用粘性位置W3school或固定使用jQuery