2015-06-14 3 views
0

любой, у кого есть решение для меня, почему он не работает? Большинство веб-сайтов позволяют навигации исчезать при слайд вниз и показывать, что вы переключаетесь обратно, в моем случае я попытался вставить скрипт и попытался не использовать код HTML и использовать из того, что у меня есть, но ничего не работает. Script-jquery navigation прокрутка вверх на слайде, не работает

<script> 
var previousScroll = 0, 
headerOrgOffset = $('#header').offset().top; 

$('target').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').fadeOut(); 
     } else { 
      $('#header').fadeIn(); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 
</script> 

HTML-

<nav class="navi" id="target"> 
    <div class="menu" id="header"> 

     <li><a class="link-1" href="#">home</a></li> 
     <li><a class="link-1" href="#">second</a></li> 
     <li><a class="link-1" href="#">third</a></li> 
     <div class="logo"> 
     <li><a href="#"><img alt="Brand" src="logo.png" height="40px" width="60px"></a><li> 
     </div> 

    </div> 
<div class="handle"><p>menu</p></div> 
    </nav> 
+0

Можете ли вы дать пример того, что вы сказали «большинство сайтов»? – Alex

ответ

0
$('target').height($('#header').height()); 

изменить его

$('#target').height($('#header').height()); 

вы забыли # :)

+0

no мой друг все еще не работает ... /: –

+0

можно добавить его в jsfiddle, я заметил, что он работает, и навигация была затухающей. –

+0

https://jsfiddle.net/ariefroni/21ha6qya/ –

1

Demo:https://jsfiddle.net/66jk442L/

вот один из способов сделать это.

var timeout, 
navbar = $('.navbar'), 
    h = navbar.height(); 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    if ($(this).scrollTop() > 100) { 
     timeout = setTimeout(hideBar, 1200); 
    } else { 
     showBar(); 
    } 
}); 

function showBar() { 
    navbar.css('height', h); 
    $('.navbar > *').show(); 
} 

function hideBar() { 
    $('.navbar > *').hide(); 
    navbar.css('height', 5); 
} 

navbar.hover(function() { 
    showBar(); 
}, function() { 
    clearTimeout(timeout); 
    if ($(window).scrollTop() > 100) { 
     timeout = setTimeout(hideBar, 1200); 
    } 
}); 
Смежные вопросы