Показана только функция поддержки клиентов. Мобильная версия и полоса прокрутки внизу страницы. ⇐ CSS

[Anonymous]

Я пытаюсь отобразить функцию поддержки клиентов (электронная почта, контакт и звонок) в мобильном представлении и полосу прокрутки внизу страницы. Для этого я попробовал приведенный ниже код, но не добился успеха. Иногда это работает, иногда нет.

Мой код:

Код: Выделить всё

[url=mailto:[email protected]]
[img]footer_image/Message.png[/img]
[/url]

[url=./contactus.php]
[img]footer_image/MAN.png[/img]
[/url]

[url=tel:16304479852]
[img]footer_image/PHONE.png[/img]
[/url]

Стили

Код: Выделить всё

.mobile_footer{
width: 100%;
/*  display: none; */
}

@media only screen and (max-width: 768px){

.mobile_footer{
width: 100%;
/* display: initial !important;*/
background-color: #003158;
}

.sticky_class{
width: 100%;
padding: 0px;
position: fixed;
bottom: 0;
background-color: #046d9f;
height: 65px !important;
z-index: 1;
}

.sticky_class_email{
width: 32%;
float: left;
margin-left: 10px;
margin-top: 7px;
}

.sticky_class_contact_us{
width: 32%;
float: left;
margin-top: 7px;
}

.sticky_class_phone{
width: 32%;
float: left;
margin-top: 7px;
}

}

Код Javascript

Код: Выделить всё

$(document).ready(function(){

window.onscroll = myScroll;
var counter = 0; // Global Variable
function myScroll(){
console.log('pageYOffset = ' + window.pageYOffset);
if(counter == 0){
if(window.pageYOffset > 300){
counter++;
}
}
}
$(window).resize(function(e) {
if ($(window).width() = 3900) {
$('body').append(".mobile_footer{display: initial !important;}");
}else{
$('body').append(".mobile_footer{display: none;}");
}
});
$(window).resize(); // call once for good measure!
});

Подскажите, как это сделать правильно. Он должен отображаться только в мобильном представлении и полосе прокрутки выше 80 % нижней части страницы.

Подробнее здесь: https://stackoverflow.com/questions/503 ... m-of-the-p