Navbar меняет размер, когда наверху веб-страницы

В этой теме начальной загрузки navbar меняет размеры при прокрутке вниз и вверх в моем JsFiddle, я попытался воссоздать это, но из нескольких попыток я потерпел неудачу и сдался. я посмотрел на много переполнение стека вопросов и других веб-страницах, может быть, мои ключевые слова были неправильно или что-то, но я не найти то, что я искал linkss нижеNavbar меняет размер, когда наверху веб-страницы

Clean Canavs THEME

Jsfiddle Here

так Этот сайт хочет некоторые код плохо после его, но я бы perfer, если вы, ребята бы разместить jsfiddle ссылки ..

CSS

body { 
padding: 0; 
/* Gets rid of the automatic padding */ 
margin: 0; 
/* on HTML documents */ 
font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
font-size: 12px; 
} 
#navigation { 
position: fixed; 
top: 0; 
width: 100%; 
color: #ffffff; 
height: 35px; 
text-align: center; 
padding-top: 15px; 
/* Adds shadow to the bottom of the bar */ 
-webkit-box-shadow: 0px 0px 8px 0px #000000; 
-moz-box-shadow: 0px 0px 8px 0px #000000; 
box-shadow: 0px 0px 8px 0px #000000; 
/* Adds the transparent background */ 
background-color: rgba(1, 1, 1, 0.8); 
color: rgba(1, 1, 1, 0.8); 
} 
#navigation a { 
font-size: 14px; 
padding-left: 15px; 
padding-right: 15px; 
color: white; 
text-decoration: none; 
} 
#navigation a:hover { 
color: grey; 
} 
/* This just adds some style to the placeholder text */ 
#content { 
width: 600px; 
padding-top: 70px; 
padding-bottom: 30px; 
margin-left: auto; 
margin-right: auto; 
{

HTML

<div id="navigation"> 
    <a href="#">Home</a> 
<a href="#">Portfolio</a> 
<a href="#">Our Apps</a> 
<a href="#">Support</a> 
<a href="#">Press</a> 
<a href="#">About</a> 
</div>

источник

2013-12-08 user3079663

Если посмотреть источник той темы, увидит, как они сделали это

они добавляют и удалить класс с помощью JQuery

$(function() { 
    $(window).scroll(function() { 
     if ($("#navigation").offset().top>35) { 
      $("#navigation").addClass("sticky"); 
     } 
     else { 
      $("#navigation").removeClass("sticky"); 
     } 
    }); 
});

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

.sticky { 
    background: rgba(0, 0, 0, 0.8); 
    padding-top: 8px!important; 
    height: 30px!important; 
}

обновлено скрипка: http://jsfiddle.net/8d8c3/2/

Пожалуйста, не забывайте ссылаться на JQuery на вашем сайте

источник

2013-12-08 11:40:39 toast

Вот еще один способ: http://stackoverflow.com/questions/6713324/how-to-shrink-navigation-menu-when-scrolling-down – toast

Спасибо, что это что я искал :) – user3079663

Вы можете сделать это только с помощью JavaScript. Sticky Header after scrolling down

Смотрите также пример jsfiddle: http://jsfiddle.net/XyVAG/9/

$(window).on("scroll", function() { 
    var fromTop = $("html,body").scrollTop(); 
    $(window).toggleClass("down", (fromTop > 200)); 
});

источник

2013-12-08 11:27:38 nick4fake

мне нравится, как это чувствует, но не совсем то, что я искал. когда я получу 15 реп, я обязательно позабочусь о вас +1 – user3079663

Вот FIDDLE

Сначала включает библиотеку JQuery в вашем <head> разделе

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Затем добавьте ниже сценарий как раз перед </body> тегом

<script> 
$(function(){ 
    $(window).scroll(function(){ 
    if($('#navigation').offset().top === 0) { 
     $('#navigation').stop().animate({ height: '50px' }, 300); 
    } 
    else { 
     $('#navigation').stop().animate({ height: '35px' }, 300); 
    } 
    }); 
}); 
</script>

источник

2013-12-08 11:46:34 mdesdev

Navbar меняет размер, когда наверху веб-страницы

ответ

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