JS Переместить деление на местоположение прокрутки

0

Я хочу переместить заголовок "navbar" с начальной страницы, когда позиция навигатора на странице достигает 400 пикселей.

Если вы посмотрите на этот jsfiddle, я хочу, чтобы .navbar покинул верхнюю часть страницы, когда начинается синий блок (при 400 пикселей). Наббар останется на странице через красный div, а затем оставьте верхнюю часть страницы, когда начнется синий блок.

Я попытался сделать это с помощью scrollorama (плагин jquery), но еще не успел:

$(document).ready(function() {
    var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
    scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});

Я ищу либо чистое решение для javascript, либо плагин scrollorama. Спасибо за любые идеи!

Теги:
scroll

2 ответа

2
Лучший ответ

Я не очень хорошо знаком с плагином scrollorama, но вы можете сделать это просто с помощью jQuery через событие scroll():

$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    var redHeight = $('#red').height();
    if (winTop >= redHeight) {
    /*if the scroll reaches the bottom of the red <div> make set '#move' element
      position to absolute so it will move up with the red <div> */ 

        $('#move').css({
            'position': 'absolute',
            'bottom': '0px',
            'top': 'auto'
        });
    } else {
      //else revert '#move' position back to fixed

        $('#move').css({
            'position': 'fixed',
            'bottom': 'auto',
            'top': '0px'
        });
    }
});

См. Обновленный файл jsfiddle: jsfiddle.net/52VtD/1945/

Изменение: сделайте так, чтобы навигационная панель исчезла с той же точки, что и красный div

Я заметил это раньше, но у меня возникли проблемы с поиском проблемы, поэтому я удалил импортированную таблицу стилей и создал базовый стиль для навигационной панели. Чтобы навигация исчезла с той же точки, что и красная div, вам нужно вычесть высоту навигационной панели:

if (winTop >= redHeight - $('#move').height()) {

Я также изменил разметку, чтобы заставить ее работать правильно. Я вложил навигатор в красный div и установил красную позицию div relative.

См. Этот jsfiddle: jsfiddle.net/52VtD/1981/

Поделиться
  • 0
    Прекрасно работает в скрипке, но когда я помещаю его на свой сайт, он почему-то не работает. Есть ли шанс, что у вас есть секунда, чтобы проверить, почему это не сработает для меня? Сайт
  • 0
    да, конечно, на сайте, когда вы хотите, чтобы навигационная панель покинула верх? Когда полоса прокрутки достигла нижней части ползунка?
Показать ещё 2 комментария
0

прослушивание события прокрутки с помощью jquery, чтобы найти, перекрывает ли navbar красный или синий div

Назначить класс красному div

   <div class="redDiv" style="height:400px; background-color: red;">

Затем прослушайте событие прокрутки и используйте getBoundingClientRect(), чтобы найти координату навигационной панели и div в порт представления, чтобы проверить наложение

   $(document).scroll(function(event)
                 {
                     var rect1 = $('.navbar').get(0).getBoundingClientRect();
                     var rect2 = $('.redDiv').get(0).getBoundingClientRect();
                     var overlap = !(rect1.right < rect2.left || 
            rect1.left > rect2.right || 
            rect1.bottom < rect2.top || 
            rect1.top > rect2.bottom)

                   if(!overlap)
                   {
                       if ( $(".navbar").is(":visible") ) {
                           $('.navbar').hide();
                       }
                   }
                   else
                   {
                        if ( !$(".navbar").is(":visible") ) {
                           $('.navbar').show();
                       }
                   }
                 });

Вот рабочая скрипка http://jsfiddle.net/SXzf7/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню