Как fadeIn div в нижней части окна при прокрутке?

У меня есть эта проблема, которая, вероятно, очень проста в решении, но я новичок с JS/JQuery. У меня есть этот код (см. Скрипку здесь: https://jsfiddle.net/Tiph/6ep3hp4j/), где мой нижний нижний нижний колонтитул показывает, когда прокрутка находится внизу документа, но я хочу, чтобы он показывал, когда свиток попадает на определенную высоту под моим заголовком и имеет фиксированное положение в нижней части окна. Я понимаю, что мне нужно что-то вычислить с помощью window.height и/offsetTop, но ничего не работает. Кто-нибудь может мне помочь? Большое вам спасибо! :-)Как fadeIn div в нижней части окна при прокрутке?

мой код здесь:

var footer = $('#footer'), 
    extra = 10; 

footer.css({ opacity: '0', display: 'block' }); 

$(window).scroll(function() { 

    var scrolledLength = ($(window).height() + extra) + $(window).scrollTop(), 
     documentHeight = $(document).height(); 


    console.log('Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight) 


    if(scrolledLength >= documentHeight) { 

     footer 
      .addClass('bottom') 
      .stop().animate({ bottom: '0', opacity: '1' }, 300); 

    } 
    else if (scrolledLength <= documentHeight && footer.hasClass('bottom')) {   
     footer 
      .removeClass('bottom') 
      .stop().animate({ bottom: '-100', opacity: '0' }, 300); 

    } 
});

источник

2016-03-14 TiphG

проблема заключается в том, что его прятать содержимое В нижней? – Zamboney

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(window).scroll(function() { 
     var count=700; 
      var menuHeight = $('#footer').height()+count; 
      var top = $(this).scrollTop(); 
      var bottom = $(document).height() - $(this).height() - $(this).scrollTop(); 
     if (bottom < menuHeight) { 

       $('#footer').removeClass('top'); 
       $('#footer').addClass('bottom'); 
       $('#footer').fadeIn('slow'); 
      } 
      else { 
       $('#footer').fadeOut('slow'); 
      } 
     }); 
}); 
</script> 
<meta charset="utf-8"> 

</head> 
<body> 
<style> 
#footer{ 
    width: 100%; 
    height: 60px; 
    background-color: #cccccc; 
    vertical-align: middle; 
    text-align: center; 
    font-size:3em; 
} 

.bottom{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    z-index: 999; 
    display:block; 
} 
</style> 
<div style="height:2000px;"></div> 
<div id="footer" style="display:none" > This is your footer</div> 
<div style="height:700px"></div>

Попробуйте изменить номер 700, чтобы установить, где вы хотите колонтитул, чтобы показать

источник

2016-03-14 08:29:22 ahmdabos

Допустим, вы хотите, чтобы заголовок, чтобы показать, когда вы прокрутили 100px от верхней части.

Вы можете сделать что-то вроде:

$(window).on("scroll", function() { 
    if(document.body.scrollTop >= 100) { 
    $("#footer").fadeIn() 
    } else { 
    $("#footer").fadeOut() 
    } 
});

Скажем, вы хотите, чтобы показывать только заголовок, если кнопка с идентификатором, callToAction выше видового экрана, вы можете сделать:

$(window).on("scroll", function() { 
    if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) { 
    $("#footer").fadeIn() 
    } else { 
    $("#footer").fadeOut() 
    } 
});

источник

2016-03-14 08:04:58

Благодарим вас за быстрый ответ. Но я думаю, что не могу объяснить (плохой). Я работаю на главной странице с кнопкой вызова к действию. Мой клиент хочет, чтобы, когда пользователь прокручивается, а кнопка больше не видна, в нижней части окна отображается какой-то липкий нижний колонтитул, поэтому кнопки CTA всегда будут видны. – TiphG

Просто измените фиксированную высоту с помощью смещения кнопки. Вы можете добавить высоту, чтобы убедиться, что ее вообще не видно –

Это код var y = $(this).scrollTop(); получите высоту прокрутки сверху.

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 800) { // scroll gets at a certain height 
    $('.bottomDiv').fadeIn(); 
    } else { 
    $('.bottomDiv').fadeOut(); 
    } 
});

источник

2016-03-14 08:06:51

Если я правильно понимаю ваш вопрос, вы должны изменить documentHeight со значением, что вы хотите.

Пример: documentHeight = 150; не documentHeight = $(document).height();

Это хорошая идея, чтобы переименовать documentHeight переменную.

источник

2016-03-14 08:11:45

Я думаю, что это было бы прекрасно, но тогда это значение было бы полезно только для определенного разрешения экрана, а не для мобильных устройств? – TiphG

процент использования тогда –

Как fadeIn div в нижней части окна при прокрутке?

ответ

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