2016-05-29 9 views
0

У меня есть сайт с 1 страницей с фиксированным заголовком и фиксированным баннером. Мой заголовок отображается только в том случае, когда я прокручиваю страницу со страницы, но когда я далее опускаю страницу, заголовок больше не появится. , пожалуйста, взгляните на мой сайт http://l.esy.es/cmeniano/Скрыть заголовок при прокрутке вниз и показать, когда вниз

ответ

0

Ну, если я понял ваш вопрос, то это потому, что вы добавляете класс .nav-up при прокрутке вниз и удалении класса .nav-down из заголовка. И ваш .nav-up имеет top:-125px Недвижимость. Это то, что заставляет ваш заголовок «скрываться».

EDIT:

// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var navbarHeight = $('header').outerHeight(); 

$(window).scroll(function(event){ 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop){ 
     $('header').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     $('header').removeClass('nav-up').addClass('nav-down'); 
    } 
    lastScrollTop = st; 
} 

Итак, я раздел дельту и сделал функцию hasScrolled проще, просто проверить, если пользователь прокручивает вверх или вниз и на основании того, что она будет добавить либо .nav-up или .nav-down.

Надеюсь, это поможет! :)

+0

да, это мое намерение прокрутить вниз скрыть навигацию и прокрутить вверх, покажите навигацию. но когда im в разделе about page, а затем, когда я пытаюсь прокрутить вверх, navbar не сходит – Christian

+0

Отредактировав ответ, проверьте его! –

+0

Спасибо, много Mali это сработало – Christian

0

Включите jquery в свой файл и используйте этот код для своей веб-страницы, я просто проверил его на вашем сайте, используя firebug.

$(window).scroll(function(e){ 
       var $el = $('header'); 

       if ($(this).scrollTop() > 200){ 
$('header').css({'display': 'none'}); 
       } 
       if ($(this).scrollTop() < 200) 
       { 
$('header').css({'display': 'block'}); 
       } 
      });  

Я не уверен, что вы точно ищете, но я надеюсь, что это поможет вам, Best of Luck. Если нет, попробуйте сделать это яснее, и я постараюсь помочь вам снова.

+0

его работая, но когда я под страницей о ней не появляется. Пожалуйста, ознакомьтесь с этой обновленной ссылкой l.esy.es/cmeniano – Christian

Смежные вопросы