Disable Sticky Header in Mobile and Tablet Home Pages

Hi,
I’ve used the following code to have a fixed header on mobiles:

/* Mobile Sticky Header */

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top: 100px !important;
}

My Question
Can I disable this function in just my home page, perhaps using my page ID something like:

/* Sticky Menu Home Page */
@media only screen and (max-width: 767px) {
.page-id-10 .responsive #top #wrap_all #header {
display: none !important;
}
}

@media only screen and (max-width: 767px) {
.page-id-10 .responsive #top #main {
padding-top: 0px !important;
}