как скрыть блок div в скрипте

[sotex2]

здравствуйте, есть бок 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>

[MC-XOBAHCK]

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;';
    })
});

[sotex2]

спасибо, но не вариант. при загрузки блок виден. в моем скрипте работает, только не знаю как правильно прописать display: none;

[j0hnik]

sotex2,
а если в скрипт MC-XOBAHCK, добавить

nav.style.cssText = 'display: none; position: inherit;';

после 7-ой строки

[sotex2]

при загрузке сайта блок виден 1-2 секунды, потом скрывается, но при прокрутки сайта блок не появляется.

[MC-XOBAHCK]

Я думал у вас изначально были стили.

Но говорите что шапка у вас фиксированная и имеет высоту 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%;';
    })
});

[sotex2]

спасибо скрипт рабочий, но только есть небольшой трабл, если при прокрутке блок появился, то после перезагрузки самой страницы, блок пропадает.