как скрыть блок div в скрипте
здравствуйте, есть бок div под шапкой сайта как скрыть блок div в скрипте, но при скролле после шапки сайта блок div был видимым. у меня сейчас такая конструкция:
<div id="top_nav"> БЛОК </div> <script> var h_hght = 80; // высота шапки var h_mrg = 0; // отступ когда шапка уже не видна var h_hght2 = 14; // высота шрифта var h_mrg2 = 20; // высота шрифта когда шапка уже не видна $(function(){ var elem = $('#top_nav'); var top = $(this).scrollTop(); if(top > h_hght){ elem.css('top', h_mrg); elem.css('font-size', h_mrg2); } $(window).scroll(function(){ top = $(this).scrollTop(); if (top+h_mrg < h_hght) { elem.css('top', (h_hght-top)); elem.css('font-size', (h_hght2)); } else { elem.css('top', h_mrg); elem.css('font-size', h_mrg2); } }); }); </script> |
sotex2,
нужно протестировать и может стили поправить: window.addEventListener('load', function () { function getCoords(elem) { var box = elem.getBoundingClientRect(); return box.top + pageYOffset } var nav = document.querySelector('#top_nav'); var navTop = getCoords(nav); document.addEventListener('scroll', function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled >= navTop) nav.style.cssText = 'display: block; position: fixed; top: 0; left: 0;'; else nav.style.cssText = 'display: none; position: inherit;'; }) }); |
спасибо, но не вариант. при загрузки блок виден. в моем скрипте работает, только не знаю как правильно прописать display: none;
|
sotex2,
а если в скрипт MC-XOBAHCK, добавить nav.style.cssText = 'display: none; position: inherit;'; после 7-ой строки |
при загрузке сайта блок виден 1-2 секунды, потом скрывается, но при прокрутки сайта блок не появляется.
|
Я думал у вас изначально были стили.
Но говорите что шапка у вас фиксированная и имеет высоту 80px (я как то это изначально упустил). Тогда всё намного проще. Добавьте css: #top_nav { display: none; position: fixed; width: 100%; top: -110%; transition: top 1s ease-out; left: 0; } А скрипт вот этот поставьте: window.addEventListener('DOMContentLoaded', function () { document.addEventListener('scroll', function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; var nav = document.querySelector('#top_nav'); if (scrolled > 80) nav.style.cssText = 'display: block; top: 0;'; else nav.style.cssText = 'display: none; top: -110%;'; }) }); |
спасибо скрипт рабочий, но только есть небольшой трабл, если при прокрутке блок появился, то после перезагрузки самой страницы, блок пропадает.
|
Часовой пояс GMT +3, время: 15:50. |