Как изменить содержимое навигационной панели при прокрутке?

Question

Речь идет не только об изменении конкретного CSS, как цвета фона, но и на самом деле демонстрирует различный контент или тот же контент, но перегруппирован по-разному. Я использую Bootstrap.

Я хочу сделать что http://www.univision.com/noticias сделал.

Должен ли я создать другой навигатор и с jQuery заставить его появляться или исчезать, в зависимости от того, прокручивается ли пользователь? Вы знаете код для этого.

Спасибо!

Answer 1

Этот эффект может быть достигнут с помощью CSS и немного JavaScript. Вы можете добавить скрипт-скрипт JavaScript, проверить нужные смещения и соответственно добавить или удалить классы CSS из элементов html.

Пример:

HTML:

<h1 class="default-style">Hello World</h1> 

УС:

.default-style { 
    background-color: yellow; 
} 
.changed-style { 
    background-color: green; 
} 

Jquery:

function init() { 
$(window).scroll(function() { 
    var distanceY = window.pageYOffset; 
    var breakpoint = 300; // you can change this value according to your layouts 
    var elementToChange = $(".default-style"); 
    if (distanceY > breakpoint) { 
     elementToChange.addClass("changed-style"); 
    } 
    else { 
     if (elementToChange.hasClass("default-style")) { 
      elementToChange.removeClass("changed-style"); 
     } 
    } 
}); 
} 

window.onload = init(); 

Конечно, в вашем случае вы можете изменить классы начальной загрузки заголовка (как вы сказали, вы используете Bootstrap). Например.

Если у вас есть три меню

<div class="col-md-4 menu-1">Home</div> 
<div class="col-md-4 menu-2">About</div> 
<div class="col-md-4 menu-3">Contact</div> 

И скажем, когда пользователь прокручивает вы хотите скрыть меню 3 и разделить общую ширину браузера пополам (для меню 1 и Меню 2) , Вы можете:

function init() { 
$(window).scroll(function() { 
    var distanceY = window.pageYOffset; 
    var breakpoint = 300; // you can change this value according to your layouts 
    var menu1 = $(".menu-1"), menu2 = $(".menu-2"), menu3 = $(".menu-3"); 
    if (distanceY > breakpoint) { 
     menu3.hide(); 
     menu1.addClass("col-md-6"); 
     menu2.addClass("col-md-6"); 
    } 
    else { 
     if (menu1.hasClass("col-md-6") || menu2.hasClass("col-md-6")) { 
      menu1.removeClass("col-md-6"); 
      menu2.removeClass("col-md-6"); 
     } 
    } 
}); 
} 

window.onload = init(); 

Надеюсь, это поможет.