Здрасьте.
Есть самая верхняя строчка на странице, так сказать, самый верхный header. В ней на сайтах часто располагается контактная информация (телефоны, адреса, прочее), так вот, мне нужно сделать так, чтобы элементы <a><img></a>
были видны лишь спустя сотку-две пикселей прокрутки. Я призадумалась, поискала и нашла такой код:
<?php function scroll_block(){
var stop = (document.body.scrollTop || document.documentElement.scrollTop);
var el=document.getElementById('menublock');
if(stop>150){
if(el.style.display!='block'){
el.style.display='block';
}
}
else
el.style.none='none';
return false;
}
if (window.addEventListener){
window.addEventListener("scroll", scroll_block, false);
window.addEventListener("load", scroll_block, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", scroll_block);
window.attachEvent("onload", scroll_block);
}
<div id='menublock' style="display:none">а тут меню</div>
?>
Затем я подумала, и теперь сделала сам элемент:
<div id="hideousvar">
<a href="http://dev.zoldol.ru/vremya-raboty-sklonov">
<img class="varhid" style="padding: 0px 5px 12px 5px;height: 25px;" title="Время работы склонов" alt="" src="http://dev.zoldol.ru/wp-content/themes/subway-child/images/clock.png"></a>
<a href="http://dev.zoldol.ru/webcamera">
<img class="varhid" style="padding: 0px 5px 10px 5px;height: 28px;" title="WEB-камера" alt="" src="http://dev.zoldol.ru/wp-content/themes/subway-child/images/camera.png"></a>
<a href="http://dev.zoldol.ru/3d-tour">
<img class="varhid" style="padding: 0px 0px 5px 0px;height: 35px;" title="3D-тур" alt="" src="http://dev.zoldol.ru/wp-content/themes/subway-child/images/tour.png"></a>
<a href="http://dev.zoldol.ru/scheme">
<img class="varhid" style="padding: 0px 5px 13px 5px;
height: 24px;" title="Интерактивная карта склона" alt="" src="http://dev.zoldol.ru/wp-content/themes/subway-child/images/map.png"></a>
</div>
Функция:
<?php
function scroll_block(){
var stop = (document.body.scrollTop || document.documentElement.scrollTop);
var el=document.getElementById('hideousvar');
if(stop>150){
if(el.style.display!='block'){
el.style.display='block';
}
}
else
el.style.none='none';
return false;
}
if (window.addEventListener){
window.addEventListener("scroll", scroll_block, false);
window.addEventListener("load", scroll_block, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", scroll_block);
window.attachEvent("onload", scroll_block);
}
<div id='hideousvar' style="display:none">а тут меню</div>
?>
Но что-то не сработало. Подскажите, пожалуйста. Буду безмерно благодарна за помощь.