Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.11.2018, 21:21
Новичок на форуме
Отправить личное сообщение для sotex2 Посмотреть профиль Найти все сообщения от sotex2
 
Регистрация: 13.11.2018
Сообщений: 4

как скрыть блок 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, 13.11.2018 в 21:31.
Ответить с цитированием
  #2 (permalink)  
Старый 13.11.2018, 22:20
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 307

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;';
    })
});
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2018, 00:56
Новичок на форуме
Отправить личное сообщение для sotex2 Посмотреть профиль Найти все сообщения от sotex2
 
Регистрация: 13.11.2018
Сообщений: 4

спасибо, но не вариант. при загрузки блок виден. в моем скрипте работает, только не знаю как правильно прописать display: none;
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2018, 01:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,381

sotex2,
а если в скрипт MC-XOBAHCK, добавить
nav.style.cssText = 'display: none; position: inherit;';

после 7-ой строки
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2018, 01:44
Новичок на форуме
Отправить личное сообщение для sotex2 Посмотреть профиль Найти все сообщения от sotex2
 
Регистрация: 13.11.2018
Сообщений: 4

при загрузке сайта блок виден 1-2 секунды, потом скрывается, но при прокрутки сайта блок не появляется.
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2018, 03:19
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 307

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

Но говорите что шапка у вас фиксированная и имеет высоту 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%;';
    })
});
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2018, 13:11
Новичок на форуме
Отправить личное сообщение для sotex2 Посмотреть профиль Найти все сообщения от sotex2
 
Регистрация: 13.11.2018
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как мышкой перемещать Div блок? Simon Общие вопросы Javascript 25 24.10.2017 12:03
Как заменить блок div? LesoRub AJAX и COMET 0 15.07.2017 20:05
Как подгружать файлы в блок <div id='content'? mikefromru AJAX и COMET 2 02.03.2017 22:22
Как скрыть все DIV кроме заданного ID при клике? sibfox777 Элементы интерфейса 1 24.11.2014 18:16
Как правильно обновить div из БД в MVC??? espltd AJAX и COMET 2 11.04.2014 01:28